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
相关推荐
JamesGosling6662 分钟前
深入理解内容安全策略(CSP):原理、作用与实践指南
前端·浏览器
不要想太多3 分钟前
前端进阶系列之《浏览器渲染原理》
前端
Robet6 分钟前
TS和JS成员变量修饰符
javascript·typescript
七喜小伙儿14 分钟前
第2节:趣谈FreeRTOS--打工人的日常
前端
我叫张小白。17 分钟前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788618 分钟前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
IT_陈寒1 小时前
React 18并发渲染实战:5个核心API让你的应用性能飙升50%
前端·人工智能·后端
科普瑞传感仪器1 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F8751 小时前
SpringMVC 请求参数接收
前端·javascript·算法
wordbaby1 小时前
搞不懂 px、dpi 和 dp?看这一篇就够了:图解 RN 屏幕适配逻辑
前端