如何用Vite动态引入的图片？
摘要：vite官网地址 https:cn.vitejs.devguideassets Vite 默认不支持 require Vite 默认不支持 require， 但可以通过安装 vite-plugin-require-transform
vite官网地址
https://cn.vitejs.dev/guide/assets
Vite 默认不支持 require
Vite 默认不支持 require，
但可以通过安装 vite-plugin-require-transform 插件来实现。
推荐优先使用 import 方式。
通过@符号和相对路径引入图片
<template>
<div class="box">
<div class="img-box" :key="index">
<img :src="demo1" alt="">
</div>
<div class="img-box" :key="index">
<img :src="demo2" 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;
}
</style>
new URL('url', import.meta.url)动态引入图片
const imgUrl = new URL('./img.png', import.meta.url).href
这个模式同样还可以通过字符串模板支持动态 URL：
function getImageUrl(name) {
return new URL(`../../${name}.png`, import.meta.url).href
}
关于 new URL('url', import.meta.url)的简单说明
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。
将它与原生的 URL 构造器组合使用，
通过相对路径我们就能得到一个被完整解析的静态资源 URL
Vite 在开发阶段并不需要处理上述代码。
在生产构建时Vite 才会进行必要的转换。保证 URL 在打包后【资源哈希】仍指向正确的地址
这个 URL 字符串必须是静态的，这样才能被分析。
否则代码将被原样保留，进而在 build.target 不支持 import.meta.url 时导致运行时错误。
实践通过 new URL来动态加载图片
<template>
<div class="box">
<div class="img-box" v-for="(itemImg,index) in sourceImgList" :key="index">
<img :src="getImgPath(itemImg)" alt="">
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const sourceImgList=ref([
{
imgName: 'demo1',
},
{
imgName: 'demo2',
},
{
imgName: 'demo3',
}
])
function getImgPath(itemImg) {
// 这里是可以使用 相对路径的，打包之后，也是没有问题的。