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/`: 图片的相对地址
相关推荐
Heo4 小时前
大厂前端调试不能只会debugger
前端·javascript·面试
windliang5 小时前
Claude Code 源码分析(十二):错误处理与自动恢复:让 Agent 稳定运行
前端·javascript·面试
默_笙5 小时前
🛬 前端路由的"高级玩法":懒加载、404、鉴权路由,一个都不能少(下篇)
前端·javascript
sunly_5 小时前
TypeScript:3、类型声明与类型推断
javascript·ubuntu·typescript
奥莱维6 小时前
【无标题】
java·前端·javascript
阿懂在掘金6 小时前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架
黄金决明子7 小时前
浏览器Window底层操作全解
前端·javascript
AI视觉网奇8 小时前
cannot import name ‘model_urls‘ from ‘torchvision.models.resnet‘
linux·前端·javascript
小锋java12348 小时前
【技术专题】Vue3 - 生命周期
vue.js·vite
Sca_杰9 小时前
微信客服API对接速通
javascript·node.js