问题描述
列表渲染中包含图片,图片资源放在项目本地静态文件夹内,导入进当前页面模板内使用报错
回顾
首先我们看看Vue2中是如何实现的:JS文件内使用require()可以解析图片路径
data(){
return {
imgUrl: require('@/assets/1.png')
}
}
<template>
<img :src="imgUrl">
</template>
在Vue2中我们使用的是JS,所以能通过require()成功解析路径,但是在Vue3项目使用typescript的时候,就会出现require引入图片报错
解决方案
1.使用import() √
使用import()需要考虑异步问题,新造一个变量接收或者原始数据中多加一个键,还要注意这引入是异步的,需要async、await转同步
export const data = [{id:1, label: '小蓝', src: import('@/assets/1.png')}]
data.map(async (item, index) => {
const path = await item.src
......
})
<template>
<img :src="item.src">
</template>
2.使用new URL() √推荐
// 获取本地图片
const getAssetsImages = (name:string) => {
return new URL(`/src/assets/${name}`, import.meta.url).href // 本地文件路径
}
<template>
<img :src="getAssetsImages(`${index + 1}.png`)">
</template>
对于new URL()在Vite官网也有介绍,这里要提醒大家一点的就是: 注意:无法在 SSR 中使用
如果你正在以服务端渲染模式使用 Vite 则此模式不支持,因为
import.meta.url
在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。