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

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

一、静态文件放public下

如果确实需要将静态文件放在assets，我们再往下看：

这里我们先假设：
静态文件目录：src/assets/images/
我们的目标静态文件在 src/assets/images/home/home_icon.png

<img :src="require('@/assets/images/home/home_icon.png')" />

尝试过require动态引入，发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法\

二、（适用于处理单个链接的资源文件）

import homeIcon from '@/assets/images/home/home_icon.png'

<img :src="homeIcon" />

三、（适用于处理多个链接的资源文件）

Vite官方文档

<template>
      <img class="footer_content_left_icon" v-for="item of 4"
        :src="getImageUrl(item)" alt="icon" />
</template>

<script lang="ts" setup>
const getImageUrl = (name:string) => {
    return new URL(`../assets/f${name}.png`, import.meta.url).href
}
</script>