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
相关推荐
C_心欲无痕16 分钟前
vue3 - 依赖注入(provide/inject)组件跨层级通信的优雅方案
前端·javascript·vue.js
幺零九零零20 分钟前
全栈程序员-前端第二节- vite是什么?
前端
你脸上有BUG40 分钟前
TreeSelect 组件 showCheckedStrategy 属性不生效问题
前端·vue
小北方城市网1 小时前
第 6 课:Vue 3 工程化与项目部署实战 —— 从本地开发到线上发布
大数据·运维·前端·ai
BD_Marathon1 小时前
Vue3_响应式数据的处理方式
前端·javascript·vue.js
90后的晨仔1 小时前
🛠️ 修复 macOS 预览乱码 PDF 的终极方案:用 Python 批量“图像化”拯救无法打开的 PDF
前端
嚣张丶小麦兜1 小时前
Vue常用工具库
前端·javascript·vue.js
曹牧2 小时前
C#:记录日志
服务器·前端·c#
小飞侠在吗2 小时前
Vue customRef
前端·javascript·vue.js