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
相关推荐
黄林晴3 小时前
你敢信吗?同样是跨端,KMP 跟 RN 居然差这么多!
android·前端
windliang3 小时前
Claude Code 源码分析(四):Tool 工具系统-从 Schema 到真实执行
前端·ai编程·claude
10WTW013 小时前
Sprite-Motion-Lab:雪碧图动画编辑器
前端·css·雪碧图·spritemotionlab·10wtw01
夏天要喝冰可乐4 小时前
用 Gitee Go 搭建WorkBuddy云端定时任务
前端·ai编程
天天鸭4 小时前
5 万处中文的老项目实现国际化,如何用架构思维完成改造?
前端·javascript·架构
程序员黑豆4 小时前
鸿蒙应用开发之持久化存储解析:PersistentStorage / PersistenceV2 / preferences 选型与实战
前端·harmonyos
明月_清风4 小时前
🚀 OpenAI 数据代理架构全解析:从 600 PB 到自然语言的六层上下文工程
前端·后端·架构
明月_清风4 小时前
🚀 从 Foundry 到 AIP:Palantir 发生了什么变化?一篇文章全搞懂
前端·后端
西门啐血5 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
涛涛ing5 小时前
2026 上半年,前端圈已经炸了五次
前端