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
相关推荐
雨落秋垣1 天前
在前端把图片自动转换为 WebP 格式
前端
羽沢311 天前
一些css属性学习
前端·css·学习
二狗哈1 天前
Cesium快速入门22:fabric自定义着色器
运维·开发语言·前端·webgl·fabric·cesium·着色器
计算衎1 天前
FastAPI后端和VUE前端的数据交互原理详解
前端·vue.js·fastapi
黑岚樱梦1 天前
Linux系统编程
java·开发语言·前端
xrl20121 天前
ruoyi-vue2前端集成DMN规则引擎
前端·规则引擎·工作流·dmn
转转技术团队1 天前
前端工程化实践:打包工具的选择与思考
前端·javascript·webpack
前端郭德纲1 天前
React 19.2 已发布,现已上线 npm!
前端·react.js·npm
哆啦A梦15881 天前
商城后台管理系统 03 规格参数配置
javascript·vue.js·elementui
知其然亦知其所以然1 天前
JavaScript 变量的江湖恩怨:一篇文章彻底讲清楚
前端·javascript·面试