Vue3 动态获取 assets 文件夹图片

我真服了Vue3 这个老六了,一个简单图片src 赋值搞得那么复杂.

 //item.type 是我遍历类型的类型参数
<img alt="吐槽大会" :src="getAssetUrl(item.type)" />

基于 Vue2 的Webpack 处理,还不错,可以用@/ 这种绝对路径,可以接受,虽然多了个require很不爽.  

const getAssetUrl = (type) => {
  return require(`@/assets/${type}.png`)
}

基于 Vue3 + Vite 更恶心了,以下写法是这样的,重要事情说三遍, 不能用绝对路径 * 3 

const getAssetUrl = (type) => {
  return new URL(`../../../assets/${type}.png`, import.meta.url).href
}

至于还有/public 这种赋值方式又不一样了,简单的事情 似乎更复杂了,纵然是老司机每次还是记不住这里面的弯弯绕绕~~~