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/`: 图片的相对地址
相关推荐
烬羽3 小时前
JS 单线程为什么不卡?一文吃透同步异步、Event Loop 和 Promise
javascript·面试
葬送的代码人生3 小时前
JavaScript 数组完全指南:从入门到实战
前端·javascript·算法
用户938515635073 小时前
深入理解 JavaScript 同步与异步:从单线程到事件循环与 Promise
前端·javascript
哈撒Ki3 小时前
快速入门vue3与常见面试题
前端·vue.js·面试
云水一下4 小时前
Vue.js从零到精通系列(一):初识Vue——背景、环境与第一个应用
前端·javascript·vue.js
大大杰哥4 小时前
Vue2学习(1)--了解基本方法与概念
javascript·学习·vue
云水一下5 小时前
Vue.js从零到精通系列(二):响应式核心——ref、reactive、computed与watch
前端·javascript·vue.js
卡布鲁5 小时前
Webpack 核心原理与自定义 Loader/Plugin 实战
前端·javascript
小林ixn5 小时前
从拼多多手机号验证到模板引擎:深入正则表达式与 JS 字符串处理
开发语言·javascript·正则表达式
智码看视界5 小时前
Web Storage 的无障碍实践与工程化应用
前端·javascript·web