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
相关推荐
liuyang___3 分钟前
分享一下这几天在公司学到的东西
前端
rocky1914 分钟前
谷歌浏览器插件 录制菜单路由跳转行为 事件重复解决方案
前端·javascript
佳腾_8 分钟前
【web服务_负载均衡Nginx】一、Nginx 基础与核心概念解析
前端·nginx·负载均衡
风中飘爻13 分钟前
MySQL入门:数据操作CURD
前端·bootstrap·html
rocky19122 分钟前
谷歌浏览器插件 录制元素拖动事件
前端·javascript
coder777740 分钟前
js逆向分享
javascript·爬虫·python·算法·安全
emoji1111111 小时前
vue3、原生html交互传值
vue.js·html·交互
nothingbutluck4641 小时前
2025.4.10 html有序、无序、定义列表、音视频标签
前端·html·音视频
爱上python的猴子1 小时前
chrome中的copy xpath 与copy full xpath的区别
前端·chrome
Lysun0012 小时前
dispaly: inline-flex 和 display: flex 的区别
前端·javascript·css