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
相关推荐
老王以为10 分钟前
我的多屏编程工作流:从切窗口到空间锚定
前端
旺王雪饼 www21 分钟前
localStorage 和 sessionStorage区别与联系
服务器·前端·javascript
道友可好30 分钟前
Superpowers vs OpenSpec vs Spec Kit:该选哪个?
前端·人工智能·后端
এ慕ོ冬℘゜31 分钟前
【双月日期范围选择器】博客(可直接交作业 / 上线)
前端·javascript·交互·jquery
VidDown44 分钟前
VidDown 使用介绍:一个免费、本地化的在线工具集
javascript·编辑器·音视频·视频编解码·视频
问心无愧05131 小时前
ctf show web入门102
android·java·前端·笔记
前端尤雨西1 小时前
package.json 中版本号遵循什么原则
前端
用户81423861188411 小时前
CSS或JS实现逐帧动画方案
前端
光影少年1 小时前
react性能优化
前端·react.js·掘金·金石计划
小牛itbull1 小时前
告别传统主题开发!ReactPress Theme Starter —— 用 Next.js 15 构建现代化无头博客
javascript·cms·react·wordpress·nextjs·reactpress·blog-theme