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/`: 图片的相对地址
相关推荐
志尊宝16 小时前
Vue3 零基础每日笔记(048):嵌套路由与命名视图——后台管理系统布局雏形
前端·javascript·vue.js·笔记·html5
雪芽蓝域zzs16 小时前
第 10 章:大屏看板自动轮播高亮(ECharts 大屏经典效果)
vue.js·echars
@tangguo12317 小时前
npm 和 yarn 配置说明
前端·javascript·npm·node.js·yarn
志尊宝17 小时前
Vue3 零基础每日笔记(052):路由常见坑一次排雷——404、刷新丢参数、部署白屏
前端·javascript·vue.js·笔记·html5
linux_cfan17 小时前
videojs v10 源代码系列解读:13 · 能力型媒体契约:`Media` 的组合接口
前端·javascript·音视频
雪芽蓝域zzs17 小时前
第 11 章:封装通用 BaseEchart 基础图表组件(Vue3 + 若依,全局复用)
vue.js·echars
福兮说17 小时前
Canvas 文字排版:measureText 量出来的宽度为什么总是不对
前端·javascript
Liu.77418 小时前
vue-virtual-scroller 插件实战用法
vue.js
用户808061814369318 小时前
JavaScript 面向对象入门到精通
前端·javascript
一条溺水的鱼18 小时前
一次讲透 JS 闭包 —— 概念、原理、应用和内存泄漏
javascript·面试