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/`: 图片的相对地址
相关推荐
兆子龙1 分钟前
xx.d.ts 文件有什么用,为什么不引入都能生效?
javascript
吴声子夜歌4 分钟前
小程序——界面API(一)
java·javascript·小程序
左夕4 分钟前
深入理解Vue中的插槽:概念、原理与应用
前端·vue.js
兆子龙6 分钟前
万字解析 OpenClaw 源码架构:从入门到精通
前端·javascript
@大迁世界7 分钟前
精通 React 面试:从零到中高级
前端·javascript·react.js·面试·前端框架
lichenyang45339 分钟前
虚拟 DOM、Diff 算法与 Fiber
前端·javascript·面试
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3第一步必是setup语法糖
前端·vue.js
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之学会vue3真正的响应式数据
javascript·vue.js
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之ref与reactive的实战区别用法
前端·vue.js
zhengxianyi5151 小时前
ruo-vue-pro 启用任务调度模块并新增一个job
java·vue.js·spring boot