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/`: 图片的相对地址
相关推荐
老毛肚8 分钟前
jeecgboot vue 路由 拆分01
前端·javascript·typescript
神仙别闹16 分钟前
VUE框架 + Element UI + Node 模拟打印机的 Web 即时打印
前端·vue.js·ui
如果超人不会飞28 分钟前
TinyVue图标使用完全指南
vue.js
西部荒野子31 分钟前
Zustand 状态管理规范:别让轻量状态变成隐形通知风暴
前端·javascript
之歆31 分钟前
Day03_ES6 深度解析与实战应用:运算符、Symbol、Class、集合与迭代协议
前端·ecmascript·es6
之歆42 分钟前
Day04_ES6完全指南:从入门到精通的现代化JavaScript开发
前端·javascript·es6
触底反弹1 小时前
从数据结构到 Prompt 设计:前端工程师的 AI 时代进阶指南
javascript·人工智能·python
暗冰ཏོ1 小时前
ECharts 前端图表开发全攻略:参数配置、项目实战与高级可视化资源整理
前端·vue.js·echarts·visual studio code
橘猫走江湖1 小时前
前端项目如何做 vibe coding
javascript·vue.js·架构