vue3+vite动态加载本地图片

在vue2+webpack中,动态加载图片使用require引入

require('../../assets/img/EyeInvisible.png')

在vite中,不能使用require,可以导入资源后再使用,类似这样

import imgUrl1 from './img'

<img src='imgUrl1'/>

也可以实现类似require的写法

const getDocImage = (docName: string) => {
  return new URL(`../../assets/imgs/${docName}.png`, import.meta.url).href;
};

<img :src='getDocImage(docName)'/>

参考vite官网写法

https://vitejs.cn/vite6-cn/guide/assets.html