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

问题: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;
}
相关推荐
知了一笑3 分钟前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室41 分钟前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~44 分钟前
重学前端004 --- html 表单
前端·html
Maybyy1 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈1 小时前
CSS中的Element语法
前端·css
Real_man1 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中1 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术1 小时前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia1 小时前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
咔咔一顿操作1 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue