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/`: 图片的相对地址
相关推荐
零陵上将军_xdr22 分钟前
后端转全栈学习-Day6-JavaScript 基础-4
前端·javascript·学习
川冰ICE24 分钟前
JavaScript实战②|电商网站交互效果,轮播图与购物车
开发语言·javascript·交互
凌云拓界30 分钟前
状态机与思考循环 ——CogitoAgent开发实战(一)
javascript·人工智能·架构·node.js·设计规范
sugar__salt36 分钟前
Bun 新一代 JavaScript/TypeScript 运行时:从入门到实战
开发语言·javascript·typescript
梦幻通灵1 小时前
Vue3 Element日期控件置灰明天之后日期
前端·javascript·vue.js
晓13131 小时前
【Cocos Creator 3.x】篇——第一章 简介
前端·javascript·游戏引擎
ZC跨境爬虫2 小时前
跟着 MDN 学JavaScript day_10:数组——数据的有序集合
android·java·开发语言·前端·javascript
晓13132 小时前
【Cocos Creator 2.x】篇——第五章 游戏常用关键技术
前端·javascript·vue.js·游戏引擎
W_LuYi1853 小时前
Tauri + Rust + Vue 3 打造极速轻量桌面应用
java·开发语言·vue.js·rust