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
相关推荐
小码哥_常2 分钟前
Flutter Android 延迟加载代码指南:提升应用性能的关键
前端
这是个栗子22 分钟前
TypeScript(三)
前端·javascript·typescript·react
kvo7f2JTy27 分钟前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto28 分钟前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan38 分钟前
git commit
前端
前端精髓3 小时前
移除 Effect 依赖
前端·javascript·react.js
码云之上3 小时前
从一个截图函数到一个 npm 包——pdf-snapshot 的诞生记
前端·node.js·github
码事漫谈4 小时前
AI提效,到底能强到什么程度?
前端·后端
IT_陈寒4 小时前
React hooks依赖数组这个坑差点把我埋了
前端·人工智能·后端
阿祖zu4 小时前
内容创作 AI 透明化声明倡议与项目开源
前端·后端·github