vite 官方默认的配置,打包后会把图片名加上 hash值,但是直接通过
:src="https://juejin.cn/post/imgSrc"
方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题,示例如下:
打包后路径:
<img src="https://juejin.cn/post/static/icon/123.jpg">
复制代码
实际打包后的图片路径:static/icon/123.hash.jpg
可以尝试以下方法解决:
HTML:
<img :src="getSrc('123')">
复制代码
JS:
const getSrc = (name) => {
const path = `/static/icon/${name}.svg`;
const modules = import.meta.globEager("/static/icon/*.svg");
return modules[path].default;
};
复制代码
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END