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/`: 图片的相对地址
相关推荐
福兮说19 分钟前
JS 正则的六个坑:带 g 的 test() 一真一假、空匹配死循环、replace 里的 $
开发语言·前端·javascript·正则表达式
miss21 分钟前
给规则引擎加一个拖拽画布:Vue Flow 单向投影 + 布局语义分离
javascript·vue.js·canvas
溪语流沙22 分钟前
Django + Vue电商项目第005讲:后端骨架|Django初始化、配置分层与DRF接入
vue.js·后端·python·django
miss1 小时前
从零做一个可视化规则引擎:Vue3 递归条件树 + 双引擎结果对比
前端·vue.js·typescript
小七在进步1 小时前
类和对象(四)
java·javascript·ajax
fastjson_1 小时前
帆软看板 - 问题收集
linux·前端·javascript
用户83134859306981 小时前
Vue3 v-bind 使用指南,从基础到高阶
前端·javascript·vue.js
用户298698530141 小时前
在 React 中使用 JavaScript 将 HTML 转换为 PDF
javascript·react.js·html
OpsEye2 小时前
企业如何统一管理多家大模型 API?
javascript·ai编程
java_nnnn2 小时前
JavaEE进阶-JavaScript初识
开发语言·前端·javascript·java-ee·ecmascript