适用场景：

img标签是通过v-bind动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。

Bug原因：

Vite打包只会处理静态src路径，动态src路径只会原样保留。

<!-- 静态src会被处理为正确地址 相对路径还是绝对路径都可以正常处理，
结果是：本地、线上均可以正常显示 -->
<img src="@/assets/xx.png" /> 

<!-- 动态src不会被处理  相对路径还是绝对路径都不会被Vite处理 
结果就是：本地可以显示，线上无法正常显示 -->
<img :src="@/assets/{imgPath}" />   

方法：

第一种情况：需要动态指定的资源很少，就那么几个

直接使用import 引入图片资源，然后添加即可。

<template>
  <div>测试页面</div>
  <img :src="myImg" />
</template>

<script lang="ts" setup>
import myImg from '/public/static/avatar.png'
</script>

第二种情况：需要动态指定的资源非常多，不想一个一个import引入，

那么可以这样：

1、把所有静态资源放到public/目录下

2、引用的资源路径改为 绝对路径 并去掉public前缀

如：在index.vue中引入 public/static/home/首页.png，那就直接使用

/static/home/首页.png 即可。

<img :src="'/static/home/' + item.iconPath" />

<script setup>
const item = {
    iconPath: '首页.png'
}
</script>

原理：

在Vite中， / 开头的绝对路径默认可以访问到 public/ 目录下的内容，所以 /public/static/home/首页.png 和 /static/home/首页.png 都可以访问到本地资源。

但是在打包时，Vite默认会原样保留绝对路径的引用地址，但不会保留public文件夹，即public下的static文件夹会被直接输出到dist/目录下，而没有public文件夹了。

所以虽然这两种都可以访问到本地资源，但是考虑到默认的打包处理方式，还是要去除掉/public前缀才能保证打包之后也可以正常引入静态资源。

第三种情况：新需求需要动态指定的资源非常多，同时项目是老项目，不能随意更改静态资源路径

 通常来说，我们可以用ES提供的 import 来代替 commonJS 的require()，在webpack中，动态引入静态文件可以这样：

<img :src="require(imgPath)" />

而在Vite中，我们虽然不能直接使用require()，但可以使用new URL批量引入静态资源：

<div v-for="(partner, index) in partnerList" :key="index">
     <img :src="getPartnerItemLogo(partner.name)" :alt="partner.name" />
</div>

// 获取合作伙伴的logo图片
const getPartnerItemLogo = (name: string) => {
  let url = new URL(`/src/assets/images/home/logo/${name}.png`, import.meta.url)
  return url.href
}

或者可以尝试Vite官方提供的 import.meta.glob API。

这个方法一般用于批量引入js或者ts文件，但实际上这个方法就是 很多import语句的集合而已，import是可以引入图片的，所以import.meta.glob 也同样可以引入图片资源，只不过需要加入配置项 as:'url' 就可以了。

错误的方法：

提前准备好数据，使用for循环来遍历数据，然后使用import()来按序添加，

错误的地方在于 ：

import xxx  from  @/xxx.png  是模块导入语法，是可以导入图片资源的，但是 import() 是动态导入方法，只能用来导入 js资源(如：.js、.json、.ts、 .vue文件)，不能用来导入图片资源。

async function getImgList() {
  for (const item of manageList.value) {
    let imgModule = await import('/src/assets/images/courseCenter/' + item.imgName)
    imgList.value.push(imgModule.default) // 报错 不能导入非js资源
  }
}