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;
}
相关推荐
永乐春秋37 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿38 分钟前
【前端】CSS
前端·css
ggdpzhk40 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app