通用:适用于处理单个链接的资源文件
import homeIcon from '@/assets/images/home/icon.png'
<img :src="homeIcon" />
webpack 构建的项目
这里我们先假设:
静态文件目录:src/assets/images/
我们的目标静态文件在 src/assets/images/home/icon.png
<img :src="require('@/assets/images/home/icon.png')" />
vite 构建的项目
尝试过require动态引入, 发现报错:require is not defind
,这是因为 require 是属于 Webpack 的方法
<img :src="getAssetsFile('/home/icon.png')" />
const getAssetsFile = (fileUrl) => {
return new URL(`../assets/images/${fileUrl}`, import.meta.url).href
}
静态资源处理 | Vite 官方中文文档
参考官网