vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题

vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题

图片引入的方式1:

因为vite构建的vue3项目，无法使用require导入图片，需要处理。
方式2: (这种打包打生产环境图片加载不显示 具体原因还在摸索)
1.新建 utils/require.js 文件

export const require = (imgPath) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    // https://vitejs.cn/guide/assets.html#the-public-directory
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

2.组件中使用

	<div class="footer">
		<div class="product_title">
			<img class="left" src="@/assets/images/left.png" />
			<div class="title">产品介绍</div>
			<img class="right" src="@/assets/images/right.png"/>
		</div>
		<div class="product_box">
				<div class="box_info" v-for="(item,index) in imgList" :key="index">
						<img class="box_left" :src="item.img" alt=""/>
						<div class="box_right">
							<span>{{ item.title }}</span>
							<span>{{ item.info }}</span>
						</div>
				</div>
		</div>
	</div>

  setup() {
	  const imgList = reactive([
			{
				img: require(`@/assets/images/tubiao1.png`),
				title:'申请简单',
				info:'最快15分钟完成',
			},
			{
				img: require(`@/assets/images/tubiao2.png`),
				title:'安全保障',
				info:'绝不泄露信息',
			},
		])
		const getCode = async()=>{
			const res =	await getCodeImg()
			console.log(res);
		}
		return {getCode,imgList};
  },