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
相关推荐
joan_85几秒前
input禁止自动填充
前端·elementui·vue
研☆香4 分钟前
简单的复选框 全选 反选功能
javascript
林间风雨4 分钟前
layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度
前端·javascript·layui
hzb6666613 分钟前
xd_day47文件上传-day55xss
javascript·学习·安全·web安全·php
木子啊15 分钟前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码
计算机学姐24 分钟前
基于SpringBoot的在线骑行网站系统
java·vue.js·spring boot·后端·mysql·spring·tomcat
梦65028 分钟前
前端路由守卫:掌控页面跳转的 “守门人”
前端
jiayong2331 分钟前
前端性能优化系列(二):请求优化策略
前端·性能优化
H_ZMY34 分钟前
前端实现 HTTPS 强制跳转与移动端域名自动适配
前端·网络协议·https
We་ct1 小时前
LeetCode 42. 接雨水:双指针解法深度剖析与全方法汇总
前端·算法·leetcode·typescript