vue中加载本地静态资源 v-for遍历本地图片

测试组件时，需要遍历一下本地图片。发现直接给img绑定src属性为图片的url，图片无法显示。

<template>
	<div v-for="item,index in pics" :key="index">
	    <img :src="item.img" alt="">
	</div>
</template>
<script>
export default {
    name: 'test',
    data() {
        return {
            pics: [
                {img: '../assets/imgs/market/1.png'},
                {img: '../assets/imgs/market/2.png'},
                {img: '../assets/imgs/market/3.png'},
            ]
        }
    }
}
</script>

查了一下原因，说是需要用require才能加载本地资源。
应当这样写：

export default {
    name: 'test',
    data() {
        return {
            pics: [
                {img: require('../assets/imgs/market/1.png')},
                {img: require('../assets/imgs/market/2.png')},
                {img: require('../assets/imgs/market/3.png')},
            ]
        }
    }
}

但是提示，Uncaught ReferenceError: require is not defined。再查了下说是require属于node.js的内容，安装了node.js依旧不行。
再查询发现了原因，webpack打包的项目可以使用require来引用本地文件。
但是测试时环境使用vite打包的，因此必须使用import的形式。

1. 可以直接使用import引入路径为某一变量，然后给img绑定动态属性为该变量，注意需要先在data中声明一下。

<template>
	 <img :src="imgUrl" alt="">
</template>

import imgUrl from '../assets/imgs/market/2.png'
export default {
    name: 'test',
    data() {
        return {
            imgUrl
        }
    }
}

2. 或者使用new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。
参考自vite官方文档：https://cn.vitejs.dev/guide/assets.html#the-public-directory

const imgUrl = new URL('./img.png', import.meta.url)
document.getElementById('hero-img').src = imgUrl

最后：
开头使用v-for遍历本地图片的代码修改为：

<template>
	<div v-for="item,index in pics" :key="index">
	    <img :src="item.img" alt="">
	</div>
</template>
<script>
export default {
    name: 'test',
    data() {
        return {
            pics: [
                {img: new URL('../assets/imgs/market/1.png', import.meta.url)},
                {img: new URL('../assets/imgs/market/2.png', import.meta.url)},
                {img: new URL('../assets/imgs/market/3.png', import.meta.url)},
            ]
        }
    }
}
</script>

成功。

参考：
Vue中v-for动态遍历本地图片
Vite 官方中文文档 - 静态资源处理