vue3+vite动态导入图片报错和解决方法

1,042 阅读1分钟

问题描述

列表渲染中包含图片,图片资源放在项目本地静态文件夹内,导入进当前页面模板内使用报错

微信截图_20221020115500.png

回顾

首先我们看看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。