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/`: 图片的相对地址
相关推荐
kyriewen11 小时前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
To_OC13 小时前
LC 1 两数之和:面试第一道必考题,暴力解法直接被面试官 pass
javascript·算法·leetcode
GuWenyue14 小时前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区14 小时前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github
何时梦醒14 小时前
深入理解递归与快速排序 —— 从基础入门到手写实现
前端·javascript
bonechips15 小时前
LLM 的无状态:从 HTTP 协议到对话上下文工程
前端·javascript
胡志辉15 小时前
从 prototype 到 V8,看懂 JavaScript 原型链
前端·javascript
mqcode16 小时前
你项目里的 axios,封对了吗?从裸用到生产级的四步进化
vue.js·axios
ping某16 小时前
专栏-null 和 undefined 到底是什么?
前端·javascript·后端
Linsk17 小时前
组件 = 模板 + 业务逻辑
java·前端·vue.js