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;
}
相关推荐
逐·風16 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js