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
相关推荐
摆烂工程师8 分钟前
2025年12月最新的 Google AI One Pro 1年会员教育认证通关指南
前端·后端·ai编程
Gavin在路上15 分钟前
DDD之用事件风暴重构“电商订单履约”(11)
java·前端·重构
我命由我1234521 分钟前
VSCode - VSCode 颜色值快速转换
前端·ide·vscode·前端框架·编辑器·html·js
qq_124987075333 分钟前
基于SpringBoot+vue的小黄蜂外卖平台(源码+论文+部署+安装)
java·开发语言·vue.js·spring boot·后端·mysql·毕业设计
前端涂涂34 分钟前
怎么设计一个加密货币 谁有权利发行数字货币 怎么防止double spending attack 怎么验证交易合法性 铸币交易..
前端
JuneTT35 分钟前
【JS】使用内连配置强制引入图片为base64
前端·javascript
前端涂涂40 分钟前
4.BTC-协议
前端
老前端的功夫1 小时前
移动端兼容性深度解析:从像素到交互的全方位解决方案
前端·前端框架·node.js·交互·css3
代码与野兽1 小时前
AI交易,怎么让LLM自己挑选数据源?
前端·javascript·后端
CC码码1 小时前
前端文本分割工具,“他”来了
前端·javascript·程序员