关于vite:vite-中动态引入图片路径

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理