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