vite动态引入图片

但可以通过安装 vite-plugin-require-transform 插件来实现。推荐优先使用 import 方式。通过符号和相对路径引入图片template div classbox div classimg-box :keyindex img :srcdemo1 alt /div div classimg-box :keyindex img :srcdemo2 alt /div /div /template script setup // 通过 符号 和 相对路径(../../)都是可以引入图片的哈 import demo1 from /assets/allpng/demo1.png import demo2 from ../../assets/allpng/demo2.png /script style scoped .box{ display: flex; } .img-box{ margin-left: 10px; margin-right: 10px; } /stylenew URL(url, import.meta.url)动态引入图片const imgUrl new URL(./img.png, import.meta.url).href这个模式同样还可以通过字符串模板支持动态 URLfunction getImageUrl(name) { return new URL(../../${name}.png, import.meta.url).href }关于 new URL(url, import.meta.url)的简单说明import.meta.url 是一个 ESM 的原生功能会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用通过相对路径我们就能得到一个被完整解析的静态资源 URLVite 在开发阶段并不需要处理上述代码。在生产构建时Vite 才会进行必要的转换。保证 URL 在打包后【资源哈希】仍指向正确的地址这个 URL 字符串必须是静态的这样才能被分析。否则代码将被原样保留进而在 build.target 不支持 import.meta.url 时导致运行时错误。实践通过 new URL来动态加载图片template div classbox div classimg-box v-for(itemImg,index) in sourceImgList :keyindex img :srcgetImgPath(itemImg) alt /div /div /template script setup import { ref } from vue const sourceImgListref([ { imgName: demo1, }, { imgName: demo2, }, { imgName: demo3, } ]) function getImgPath(itemImg) { // 这里是可以使用 相对路径的打包之后也是没有问题的。 return new URL(../../assets/allpng/${itemImg.imgName}.png,import.meta.url).href } /script style scoped .box{ display: flex; } .img-box{ margin-left: 10px; margin-right: 10px; } /style打包之后也是可以正常显示的通过 import.meta.glob 的方式动态引入图片template div classbox div classimg-box v-for(itemImg,index) in sourceImgList :keyindex img :srcgetImgPath(itemImg) alt /div /div /template script setup import { ref } from vue const sourceImgListref([ { imgName: demo1, }, { imgName: demo2, }, { imgName: demo3, } ]) // 通过 import.meta.glob 的方式引入图片指向的是src目录, const productAllPngImgObj import.meta.glob(/assets/allpng/*.png, { eager: true }) const iconMap {} for (const path in productAllPngImgObj) { //path的值是 /src/assets/allpng/demo1.png const moduleObj productAllPngImgObj[path] // 字符串转化为数组然后取数组的最后一个元素 fileNamedemo1.png const fileName path.split(/).pop() iconMap[fileName] moduleObj.default //iconMap存储的是这样的格式 { demo1.png : /src/assets/allpng/demo31.png} console.log(iconMap, iconMap) } function getImgPath(itemImg) { const imgName ${itemImg.imgName}.png return iconMap[imgName] } /script style scoped .box{ display: flex; } .img-box{ margin-left: 10px; margin-right: 10px; } /style打包之后图片也是可以正常展示的