vue3项目img标签动态设置src,提示:ReferenceError: require is not defined

1、 问题:

vue3项目中, 动态设置img标签的src属性

js 复制代码
<img class="svg" :src="require(`@/assets/imgs/${imgUrl}`)" />

报错:ReferenceError: require is not defined

2、 解决

js 复制代码
<img class="svg" :src='getImgUrl()' />

//js
  let imgUrl = ref('****.png') //动态图片名称
  const getImgUrl = () => {
    const str = imgUrl.value;
    return new URL(`./../imgs/` + str, import.meta.url).href
  }
  //`./../imgs/`: 图片的相对地址
相关推荐
申君健248641827720211 分钟前
MCP TypeScript SDK v2 完整升级变化说明
javascript
卤蛋fg621 分钟前
vxe-table 自定义复制粘贴逻辑:精确控制单元格数据转换
vue.js
Ivanqhz27 分钟前
Rust Lazy浅析
java·javascript·rust
铁皮饭盒1 小时前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
张人玉2 小时前
基于 Vue 3 + ECharts + Express + SQLite 构建的新能源汽车销量数据分析与可视化平台——新能源汽车销量数据分析系统
数据库·vue.js·sqlite·echarts
weixin_BYSJ19873 小时前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php
Wect5 小时前
TypeScript 完全指南
前端·javascript·typescript
清风programmer5 小时前
H5与小程序通信
前端·vue.js·uni-app
张元清5 小时前
React useDeepCompareEffect:修复 useEffect 的对象依赖问题(2026)
javascript·react.js
phltxy5 小时前
LangChain_v1_Agent快速开发和更新说明
前端·javascript·langchain