vue3 动态引入图片时require is not defined_vue3 require is not defined

在vue3项目中，需要动态引入图片，按照以前的方式会报require is not defined。

<div class="litBox" v-for="(item, index) in itBoxData" :key="index">
		<img class="imgg" :src="item.imgg" alt="" />
</div>
				
......

tBoxData: [
				{
					index: 1,
					title11: '总数',
					num1: '345',
					imgg: require(`../../../assets/images/icon1.png`)
				},
				{
					index: 2,
					title11: '人数',
					num1: '245',
					imgg: require(`../../../assets/images/icon2.png`)
				},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

解决方法1：把引入方式改成 imgg: new URL(url, import.meta.url).href

tBoxData: [
				{
					index: 1,
					title11: '总数',
					num1: '345',
					imgg: new URL(`../../../assets/images/icon1.png`, import.meta.url).href
				},
				{
					index: 2,
					title11: '入人数',
					num1: '245',
					imgg: new URL(`../../../assets/images/icon2.png`, import.meta.url).href
				},
				]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

解决方法2：见引入方式封装成函数，方便多次引用。

<div class="litBox" v-for="(item, index) in itBoxData" :key="index">
		<img class="imgg" :src="getImg('../../../assets/images/icon' + (index + 1) + '.png')" alt="" />
</div>

......

getImg(url) {
		return new URL(url, import.meta.url).href
	},

1
2
3
4
5
6
7
8
9
10