vite 中动态引入图片路径

Posted 2021-09-07 Renato

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;
  };