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/`: 图片的相对地址
相关推荐
敲敲了个代码10 分钟前
vue文件自动生成路由会成为主流
开发语言·前端·javascript·vue.js·前端框架
程序员林北北13 分钟前
【前端进阶之旅】typescriot的数据类型讲解(二)
前端·javascript·vue.js·react.js·typescript
霍理迪18 分钟前
JS—事件高级
开发语言·javascript·ecmascript
接着奏乐接着舞28 分钟前
vue3面试题
前端·javascript·vue.js
xkxnq31 分钟前
第六阶段:Vue生态高级整合与优化(第81天)(Pinia核心进阶)状态模块化设计+跨模块通信(storeToRefs使用避坑)
前端·javascript·vue.js
阿珊和她的猫1 小时前
深入解析浏览器的渲染过程
前端·javascript·vue.js
匠心网络科技1 小时前
JavaScript进阶-ES6 带来的高效编程新体验
开发语言·前端·javascript·学习·面试
睡不着的可乐2 小时前
createElement → VNode 是怎么创建的
前端·javascript·vue.js
光影少年2 小时前
前端css如何实现水平垂直居中?
前端·javascript·css
摸鱼的春哥2 小时前
把白领吓破防的2028预言,究竟讲了什么?
前端·javascript·后端