问题:Vue3+TypeScript+Vite 的项目中使用require动态引入图片报错
一、问题复现步骤
1、开发项目时动态引入静态资源,也就是 img 标签的 src 属性值动态获取,按以往做法直接require引入
html
<img :src="require(`../../../assets/image/${item.img}`)" />
2、然而使用 require 这种方式引入图片后,代码波浪线报错,报错提示:
text
找不到名称 "require"。是否需要为节点安装类型定义? 请尝试使用 npm i --save-dev @types/node。ts(2580)
3、在进行了npm i --save-dev @types/node 安装以及在TypeScript的配置文件 tsconfig.json中添加了配置项 "type":["node"] 后波浪线提示消失,但 浏览器的控制台依然报错,错误提示如下:
二、原因
在vite中不能使用require引入图片资源,因为这里的require貌似是webpack提供的一种加载能力,由于我们并非使用的webpack作为项目的构建工具,使用的是Vite,因此这里必须用 Vite提供的静态资源载入方式:https://vitejs.cn/guide/assets.html
js
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('img1').src = imgUrl
三、解决
new URL 一共接收两个参数,第一个参数即图片的路径,这里就是对应require中的值,第二个参数是vite的一个全局变量,可以理解成直接写死了 import.meta.url,放到项目中大致如下:在 template 的img上动态引入,getIcon方法如下,这样就可以在Vue3+TypeScript+Vite中动态引入图片等静态资源了
vue
<template>
<img :src="getIcon(name)" />
</template>
function getIcon(name: string) {
return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}