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/`: 图片的相对地址
相关推荐
笔优站长7 小时前
从 Vue 2 到 Vue 3:我把 vue-aliplayer-v2 重构成了一个更现代的阿里云播放器组件
前端·vue.js
宋浮檀s8 小时前
DVWA通关教程2
运维·服务器·前端·javascript
皮卡祺q8 小时前
【算法-0】背包问题(三维+二维)
java·javascript·算法
whuhewei8 小时前
手写Promise
开发语言·javascript·ecmascript
川冰ICE9 小时前
JavaScript入门⑤|数组方法全攻略,map/filter/reduce三剑客
开发语言·javascript·ecmascript
threelab9 小时前
Three.js 抽象艺术着色器效果 | 三维可视化 / AI 提示词
前端·javascript·人工智能·3d·着色器
008爬虫实战录9 小时前
【码上爬】 题十八:模拟大厂加密算法, 堆栈分析找加密点,扣自执行函数,jsdom补环境
开发语言·javascript·ecmascript
skywalk81639 小时前
脚本 isMobile.js(移动设备检测库)的核心实现
开发语言·javascript·ecmascript
i_am_a_div_日积月累_9 小时前
3.contextBridge桥梁
前端·javascript·vue.js·electron
bug-1008610 小时前
hooks,mixin,pinia,vuex
前端·vue.js