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/`: 图片的相对地址
相关推荐
麦麦大数据几秒前
D038 vue+django西游记问答知识图谱可视化系统
vue.js·django·问答系统·知识图谱·neo4j·可视化·可是还
浩星2 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
Niyy_5 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
快乐非自愿6 小时前
常用设计模式:工厂方法模式
javascript·设计模式·工厂方法模式
岁月宁静6 小时前
AI 多模态全栈应用项目描述
前端·vue.js·node.js
十年磨一剑~6 小时前
html+js开发一个测试工具
javascript·css·html
汪汪队立大功1237 小时前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
han_8 小时前
前端高频面试题之Vuex篇
前端·vue.js·面试
天天向上10248 小时前
VueUse的使用
前端·vue.js·vscode
FREE技术8 小时前
学生成绩管理系统 基于java+springboot+vue实现前后端分离项目并附带万字文档(源码+数据库+万字详设文档+软件包+安装教程)
java·vue.js·spring boot·mysql