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/`: 图片的相对地址
相关推荐
BioRunYiXue20 分钟前
RACE技术全攻略:从全长克隆到靶基因验证
java·javascript·网络·人工智能·科技·算法·eclipse
IMPYLH31 分钟前
HTML 的 <ins> 元素
前端·javascript·html
晨米酱37 分钟前
Umi Mock 如何从文件声明变成 HTTP 响应
前端·javascript·设计
01_ice1 小时前
前端学习JS(3)
前端·javascript·学习
无懈可击1 小时前
Vue 低代码可视化 AI 表单设计器 FcDesigner v3.5 版本发布!
前端·vue.js·前端框架
Web - Anonymous1 小时前
Vue3 + Element Plus 集成 JSON Editor 实现实时校验 JSON 编辑器(高亮/暗亮主题/分栏回显/组件复用) - 附完整示例
vue.js·编辑器·json
Hilaku1 小时前
外包前端和大厂前端,写的代码到底有什么本质区别?
前端·javascript·程序员
YHHLAI2 小时前
React `useState` 深入浅出
前端·javascript·react.js
斯内普吖2 小时前
(开源)农产品电商系统实战指南 基于 Java + SpringBoot + Vue + MySQL
java·vue.js·spring boot·mysql·开源
半个落月2 小时前
用 Harness 工程化缓解 LLM 幻觉:Best of N Sampling + LLM as Judge 实战
javascript·人工智能