el-image(vue 总)

一 加载静态资源

在第一次使用vue3开发项目时,使用require('图片路径'),结果浏览器报错:

javascript 复制代码
Uncaught (in promise) ReferenceError: require is not defined

因为require是webpack提供的一种加载能力,但是vue3项目时搭配vite的,所以这里应该用vite提供的静态资源载入方法,

官方文档:https://vitejs.cn/guide/assets.html#the-public-directory

将上面的require改为new URL这种格式,页面就可以正常加载静态资源了

javascript 复制代码
<img :src="image" />

const image = new URL('@/static/images/error.svg', import.meta.url).href
相关推荐
betazhou1 分钟前
借用Deepseek写一个定期清理备份文件的ps脚本
开发语言·前端·javascript·ps·deepseek·清理备份文件
麦麦大数据5 分钟前
F076 中医中药知识智能问答与图谱构建研究系统 Vue+Flask+Neo4j
vue.js·flask·知识图谱·neo4j·智能问答·推荐算法·中医中药
英俊潇洒美少年5 分钟前
vue confirm、messageBox等弹窗关闭后焦点残留问题
前端·javascript·vue.js
东东最爱敲键盘5 分钟前
第7天 进程间通信
java·服务器·前端
harrain10 分钟前
vue3怎么扩展第三方依赖库内部逻辑(拿element plus举例)
前端·javascript·vue.js·elementui
资深web全栈开发20 分钟前
JS防爬虫3板斧
开发语言·javascript·爬虫
Ulyanov25 分钟前
三维战场可视化核心原理(一):从坐标系到运动控制的全景指南
开发语言·前端·python·pyvista·gui开发
天若有情67332 分钟前
从语法拆分到用户感知:我的前端认知重构之路
前端·javascript
_OP_CHEN35 分钟前
【前端开发之CSS】(五)CSS 盒模型深度解析:从基础到实战,掌控页面布局核心
前端·css·html·盒模型·页面开发·页面布局·页面美化
摘星编程39 分钟前
用React Native开发OpenHarmony应用:DrawerNavigation侧滑关闭
javascript·react native·react.js