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
相关推荐
天若有情6734 分钟前
笑喷!乌鸦哥版demo函数掀桌怒怼主函数:难办?那就别办了!
java·前端·servlet
记得记得就1515 分钟前
【Nginx 实战系列(一)—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装】
前端·nginx·http
天蓝色的鱼鱼5 分钟前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
JarvanMo10 分钟前
适用于 iOS 开发者的 Flutter 3.38:Xcode 与 Swift 集成新技巧
前端
北极糊的狐22 分钟前
Vue 中 vue-awesome-swiper的使用笔记(适配 Vue2/Vue3)
前端·javascript·vue.js
anyup26 分钟前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
m0_6265352034 分钟前
代码分析 长音频分割为短音频
javascript·python·音视频
2***574238 分钟前
前端数据可视化应用
前端·信息可视化
xiaoxue..39 分钟前
栈的全面解析:ADT、实现与应用
javascript·数据结构·面试
DevUI团队44 分钟前
Angular开发者必看:深度解析单元测试核心技巧与最佳实践
前端·javascript·angular.js