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/`: 图片的相对地址
相关推荐
shawxlee15 分钟前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
kyriewen1 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
郝亚军2 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
an317424 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
GitLqr4 小时前
Vue 3.6 Vapor Mode vs React 19 Compiler:前端架构的两条分叉路
vue.js·react.js·vapor
TeamDev5 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
整點薯條5 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
前端甜糖7 小时前
记录We码开发者工具的一个bug
前端·javascript
猫3287 小时前
echarts 日常问题解决
前端·javascript·echarts
不简说8 小时前
JS 代码技巧 vol.8 — 20 个函数式编程实战,把 if/else 拍扁的骚操作
前端·javascript·面试