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/`: 图片的相对地址
相关推荐
渣波几秒前
重构旅行体验:基于 React 的 AI 旅游助手对话系统实战解析
前端·javascript
李顿波5 分钟前
Chrome 插件弹窗一直停留在初始的小尺寸 —— 你看到的小方块
前端·javascript·chrome
渣波7 分钟前
React 移动端首页架构实战:从并发请求到防御性编程的深度解析
前端·javascript
Highcharts.js1 小时前
Highcharts 主流前端框架无缝集成指南
前端·vue.js·前端框架·highcharts·可视化图表
岁岁种桃花儿2 小时前
Vue核心语法第十一篇:绑定样式
前端·javascript·vue.js
万少11 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
Brown.alexis12 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝13 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
满栀58514 小时前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript
大龄码农有梦想16 小时前
Vue + BPMN.js + Camunda:搭建企业级流程设计器完整实践
javascript·vue.js·流程设计器·bpmn.js·bpmn·流程审批·工作流设计器