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/`: 图片的相对地址
相关推荐
mCell7 分钟前
JavaScript:从事件循环到手写 Promise
javascript·面试·浏览器
芯芯点灯1 小时前
gd32f303烧录提示Flash Timeout. Reset the Target and try it again.;
开发语言·前端·javascript
放下华子我只抽RuiKe51 小时前
React 从入门到生产(七):性能优化实战
前端·javascript·人工智能·react.js·性能优化·前端框架·github
糯米团子7491 小时前
vue知识点复习
前端·vue.js
范同学~1 小时前
多个表单如何用element ui 校验
javascript·vue.js·ui
FlyWIHTSKY1 小时前
Next中引入 Ant Design (antd)的配置
开发语言·前端·javascript
JAVA学习通1 小时前
《大营销平台系统设计实现》 - 营销服务 第9节:模板模式串联抽奖规则
服务器·前端·javascript
阿正的梦工坊1 小时前
【Typescript】10-条件类型与-infer
前端·javascript·typescript
李燚2 小时前
ReAct 循环的 50 行 Go 实现,逐行拆解
javascript·人工智能·react.js·golang·aigc·agent
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_8:(盒模型完全解)
前端·javascript·css·ui·交互