图片与媒体资源导入

Vite 支持在 JavaScript/TypeScript 中导入静态资源文件，导入后返回资源的 URL。

导入图片

// 导入图片，返回 URL
import logoUrl from './assets/logo.png'

// 使用 URL
const img = document.createElement('img')
img.src = logoUrl
document.body.appendChild(img)

Vue 中使用

<script setup>
import logoUrl from './assets/logo.png'
</script>

<template>
  <img :src="logoUrl" alt="logo" />
</template>

导入其他媒体

// 导入视频
import videoUrl from './assets/demo.mp4'

// 导入音频
import audioUrl from './assets/sound.mp3'

// 导入字体
import fontUrl from './assets/font.woff2'

内联小资源

小于 build.assetsInlineLimit（默认 4KB）的资源会被内联为 base64：

// 小于 4KB，返回 base64 字符串
import smallIcon from './assets/icon.png'
console.log(smallIcon) // "data:image/png;base64,..."

// 大于 4KB，返回 URL
import largeImage from './assets/banner.png'
console.log(largeImage) // "/assets/banner.xxx.png"

强制内联或 URL

// 强制内联
import inlineUrl from './assets/icon.png?url'

// 强制返回 URL
import rawUrl from './assets/icon.png?inline'

注意：默认配置下小于 4KB 的资源自动内联，可通过 assetsInlineLimit 修改阈值。

资源处理对比

要点总结

• 导入静态资源返回 URL 或 base64
• 小于阈值自动内联为 base64
• 支持 ?url 和 ?inline 查询参数控制
• 支持图片、视频、音频、字体等