vite 官网默认的配置,打包后会把图片名加上 hash值,然而间接通过 :src="imgSrc"
形式引入并不会在打包的时候解析,导致开发环境能够失常引入,打包后却不能显示的问题,示例如下:
打包后门路:
<img src="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; };