Vue3+TypeScript+Vite 的项目中使用require动态引入图片报错

俺是老王2023-12-20 8:41

问题：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;
}