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/`: 图片的相对地址
相关推荐
Jackson__9 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
林小帅9 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
Hilaku11 小时前
为什么你的大文件断点续传,一遇到弱网就崩溃?
前端·javascript·程序员
林恒smileZAZ12 小时前
`Array(100).map(() => 1)` 为什么全为空?
前端·javascript
濮水大叔13 小时前
在大型 Vue 项目中,如何有效管理复杂的状态?“散装版” vs “套装版”
前端·vue.js·typescript
laowang35714 小时前
依赖故障时,日志体系需要埋哪些关键节点才能快速定位是安装失败、解析失败还是运行时缺失?
前端·javascript·vue.js·webpack·node.js
༄沐࿆风࿆࿆16 小时前
JavaScript函数完全指南:从基础语法到闭包原理与应用实战
开发语言·javascript
finyouIT16 小时前
锚点实现了点击导航平滑滚动到页面指定位置的三种方法
javascript·css
神奇的代码在哪里19 小时前
AI编程时代,PPT已成为过去,单个HTML文件创造无限可能
javascript·html·powerpoint·ai编程·ppt
Highcharts19 小时前
从 ECharts 平滑迁移 Highcharts的配置映射与踩坑手册
前端·javascript