按照 vite官网所述), 静态图片可以放在 <root>/public文件夹内, 然后可以直接用根目录/访问此文件夹.
例如, <root>/public文件夹内有一个example.png文件, 当使用标签 <img src='/example.png'> 时, vite能够正确找到该图片.项目发布时,vite build能够自动为静态文件路径添加前缀 Public Base Path.
但是如果是动态给定的图片, 例如
<img :src="url" />
const url = ref('/example.png')
就会发现开发环境没有问题, 但在生产环境中的静态文件url仍然是 /example.png, 并没有如预想的那样,增加前缀, 导致生产环境产生静态图片丢失.
在github上 也有人有类似疑问. 大部分的解决方案都是说,利用 import 语句, 来导入图片, 这样 vite 才能有机会去预处理图片路径.
类似这样:
// images.js
import foo from 'xxx/foo.png'
import bar from 'xxx/bar.png'
export default {
foo,
bar
}
这个法子比较繁琐, 我发现一个更好的解决方案, 就是不加根目录/, 直接用
const url = ref('example.png')
这样无论是开发环境还是生产环境, 都能正常显示图片.
