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 这种赋值方式又不一样了,简单的事情 似乎更复杂了,纵然是老司机每次还是记不住这里面的弯弯绕绕~~~