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
相关推荐
JIngJaneIL几秒前
基于java+ vue家庭理财管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
GISer_Jing4 分钟前
Taro跨端开发实战:JX首页实现_Trae SOLO构建
前端·javascript·aigc·taro
vipbic5 分钟前
基于 Nuxt 4 + Strapi 5 构建高性能 AI 导航站
前端·后端
不要em0啦28 分钟前
从0开始学python:简单的练习题3
开发语言·前端·python
老华带你飞28 分钟前
电商系统|基于java + vue电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
星月心城31 分钟前
面试八股文-JavaScript(第四天)
开发语言·javascript·ecmascript
大猫会长34 分钟前
关于http状态码4xx与5xx的背锅问题
前端
喝拿铁写前端42 分钟前
AI 驱动前端开发覆盖的能力全景拆解
前端·javascript·人工智能
1024小神44 分钟前
确认了,Cloudflare的R2对象存储S3接口api不支持在web端使用
前端
不染尘.1 小时前
应用层之WWW
服务器·javascript·css·网络·网络协议·计算机网络·html