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
相关推荐
rfidunion15 分钟前
springboot+VUE+部署(12。Nginx和前端配置遇到的问题)
前端·vue.js·spring boot
vx-Biye_Design29 分钟前
servlet家政公司管理系统-计算机毕业设计源码01438
java·vue.js·spring·servlet·tomcat·maven·mybatis
珹洺31 分钟前
Java-servlet(五)手把手教你利用Servlet配置HTML请求与相应
java·运维·服务器·前端·servlet·html·maven
FYKJ_201039 分钟前
springboot大学校园论坛管理系统--附源码42669
java·javascript·spring boot·python·spark·django·php
QQ243919742 分钟前
语言在线考试与学习交流网页平台信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·spring boot·sql·学习·java-ee
范特西.i1 小时前
QT聊天项目(6)
前端
a1117761 小时前
水体渲染系统(html开源)
前端·开源·threejs·水体渲染
程序员小李白2 小时前
CSS 盒子模型
前端·css·html
Zzz不能停2 小时前
单行 / 多行文本显示省略号(CSS 实现)
前端·css
xiaoxue..2 小时前
TailwindCSS:从“样式民工”到“UI乐高大师”的逆袭
前端·css·ui