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/`: 图片的相对地址
相关推荐
就叫飞六吧38 分钟前
子页面和dialog案例
开发语言·javascript·ecmascript
小月土星1 小时前
(实战篇)RAG-demo 深度解析:162行代码中的检索增强生成全景 (含Top-k法)
javascript·数据库·llm
lvchaoq2 小时前
this指向面试代码输出题目合集
javascript·面试·职场和发展
你怎么知道我是队长3 小时前
JavaScript 函数 this 全解
开发语言·javascript·ecmascript
不简说4 小时前
JS 代码技巧 vol.5 — 10 个错误处理套路,从 try/catch 到 Error Boundary
前端·javascript·程序员
wordpress资料库4 小时前
Next.js更适合移动开发 不适合web开发
开发语言·前端·javascript·next.js
李明卫杭州6 小时前
Vue 3 `markRaw` 详解:什么时候该让一个对象"别被代理"
vue.js
用户83134859306986 小时前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js
meilindehuzi_a6 小时前
Vue 项目中的前端 BFF:跨域代理与流式请求实战
前端·javascript·vue.js
To_OC7 小时前
LC 79 单词搜索:都说这是回溯入门题,我却连错三回
javascript·算法·leetcode