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/`: 图片的相对地址
相关推荐
小米渣的逆袭7 分钟前
Chrome Extension Script World(ISOLATED / MAIN)原理与适用场景
前端·javascript·chrome
Esaka_Forever1 小时前
Python 与 JS (V8) 垃圾回收核心区别 + 底层根源分析
开发语言·javascript·jvm
林希_Rachel_傻希希1 小时前
web性能优化之——AI总结视频
前端·javascript·面试
前端炒粉1 小时前
个人简历面经总结二
前端·网络·vue.js·react.js·面试
binbin_521 小时前
UIAbility 与 WindowStage:窗口创建、加载、销毁的完整链路
开发语言·javascript·深度学习·华为·harmonyos
格子软件2 小时前
2026年分布式GEO代理架构:多租户动态数据源隔离与流控源码解构
java·vue.js·人工智能·分布式·架构·vue·geo
weedsfly2 小时前
Cookie 安全三属性:HttpOnly、Secure、SameSite 分别防什么?
前端·javascript·面试
前端炒粉2 小时前
马克思主义基本原理在Vue框架中的指导作用探析
前端·javascript·vue.js
happyprince2 小时前
12-vLLM 量化方案全面分析
前端·javascript·vllm
必胜刻2 小时前
从零搭建全栈博客系统:Go + Vue 3 + Docker 全流程实战
vue.js·docker·golang