el-image(vue 总)

news2024/11/16 19:41:43

一 加载静态资源

在第一次使用vue3开发项目时,使用require(‘图片路径’),结果浏览器报错:

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这种格式,页面就可以正常加载静态资源了

<img :src="image" />

const image = new URL('@/static/images/error.svg', import.meta.url).href

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2120065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

经典文献阅读之--Multi S-Graphs(一种高效的实时分布式语义关系协同SLAM)

0. 简介 协作同时定位与建图&#xff08;CSLAM&#xff09;对于使多个机器人能够在复杂环境中操作至关重要。大多数CSLAM技术依赖于原始传感器测量或低级特征&#xff0c;如关键帧描述符&#xff0c;这可能由于缺乏对环境的深入理解而导致错误的闭环。此外&#xff0c;这些测量…

[SDK]-菜单 和 树控件

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解菜单和树控件的相关知识 菜单 认识菜单 及 创建自定义菜单栏 资源文件 -> 项目名.rc ->Menu 这是系统提供的默认菜单&#xff0c;也可以往里面添加修改内容 以下是 自定义菜单栏&#xff1a; 创…

如何通过Autoscaler实现Kubernetes的伸缩?

本文将介绍如何在流量高峰之前使用KEDA和Cron scaler主动调整工作负载规模。 在设计Kubernetes集群时&#xff0c;我们可能经常需要回答以下问题&#xff1a; 集群伸缩需要多长时间&#xff1f;在新Pod创建之前需要等待多长时间&#xff1f; 有四个主要因素会影响集群的伸缩…

Windows环境下 VS2022 编译 OGG 源码

OGG OGG音频编码格式&#xff0c;全称为Ogg Vorbis&#xff0c;是一种开源且无专利限制的音频压缩格式。它被设计用来提供高质量的音频存储和传输&#xff0c;同时保持较小的文件大小。OGG Vorbis支持多声道音频&#xff0c;并且可以处理可变比特率&#xff0c;这意味着它可以根…

分享从零开始学习网络设备配置--任务6.3 使用基本ACL限制网络访问

任务描述 某公司构建了互联互通的办公网&#xff0c;为保护公司内网用户数据的安全&#xff0c;该公司实施内网安全防范措施。公司分为经理部、财务部和销售部&#xff0c;分属3个不同的网段&#xff0c;3个部门之间用路由器进行信息传递。为了安全起见&#xff0c;公司领导要求…

npm 清除缓存

npm cache clean --forcenpm cache verify# 安装依赖 npm install# 建议不要直接使用 cnpm 安装依赖&#xff0c;会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registryhttps://registry.npmmirror.com npm彻底清理缓存_npm cache verify-CSD…

OpenCV仿射变换和透视变换函数(C++)

文章目录 引言图像仿射变换 warpAffine()图像的旋转仿射变换 透视变换 warpPerspective()透视变换例子参考文献 **仿射变换相关函数** cv::transform()&#xff1a;对一组点进行仿射变换 cv::warpAffine()&#xff1a;对整幅图像进行仿射变换 cv::getAffineTransform()&#xf…

[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 01 安装 nodejs 环境

文章目录 下载安装测试 这里让我们去看看如何安装一下 nodejs 的环境 下载 通过官网进行下载安装包 官网 https://nodejs.org/zh-cn点击 下载 Node.js (LTS) 开始下载 安装 下载完成之后&#xff0c;双击进行安装 开始进行安装了 这样&#xff0c;node.js 就安装好了 测试 …

Ubuntu下使用Cron定时任务

Ubuntu下使用Cron定时任务 文章目录 Ubuntu下使用Cron定时任务概述Cron 工作原理crontab的基本指令使用Cron 定时任务语法用户的crontab 文件系统的crontab 文件cron 任务设置环境变量1. 直接在 crontab 中声明变量2. 将变量声明为命令的一部分3. 从文件加载变量使用环境变量控…

网络基础入门指南(二)

一、什么是交换机 交换机&#xff0c;Switch 用于将多台计算机/交换机连接到一起&#xff0c;组建网络 交换机负责为其中任意两台计算机提供独享线路进行通信类型&#xff1a; 非网管&#xff08;即插即用&#xff09;&#xff0c;便宜&#xff0c;不可管理 网管&#xff0…

CCF推荐C类会议和期刊总结:(计算机体系结构/并行与分布计算/存储系统领域)

中国计算机学会&#xff08;CCF&#xff09;在计算机体系结构、并行与分布计算、存储系统领域推荐了一系列C类会议和期刊。此汇总涵盖了各期刊和会议的全称、出版社、dblp文献网址及研究领域&#xff0c;为学者和研究人员提供了重要的学术交流资源。列表包括《ACM Journal on E…

Javase复习day21算法、arrays、Lamdba表达式

常见算法 查找算法 基本查找 package search;public class BasicSearchDemo1 {public static void main(String[] args) {//基本算法&#xff08;顺序查找&#xff09;int[] arr {131,23,57,37,95,48,57,43};System.out.println(basicSearch(arr, 43));}public static boo…

基于PINN 进行混合流体中的热量与质量扩散预测

近年来&#xff0c;物理信息神经网络&#xff08;PINN&#xff0c;Physics-Informed Neural Networks&#xff09;成为解决复杂物理问题的一种强大工具。PINN 的核心在于结合物理定律和机器学习的能力&#xff0c;直接从偏微分方程&#xff08;PDEs&#xff09;出发&#xff0c…

LDtk to Unity 大致流程和一些注意点

因为自己也还在探索中&#xff0c;所以有点杂乱&#xff0c;后续有其他的东西还会继续更。 制作 先套用这个模板&#xff0c;确定基础的循环。再去丰富。 LDtk一小时完全入门教程_哔哩哔哩_bilibili To Unity 安装包 LDtk To Unity 输出 图集 在Run after saving运行 ../../Lib…

Arch - 架构安全性_凭证(Credentials)

文章目录 OverView凭证&#xff08;Credentials&#xff09;1. 传统认证授权方式&#xff1a;Cookie-Session 机制2. OAuth2 令牌概述什么是 JWTJWT 令牌 结构HeaderPayloadSignature JWT的优劣势无状态架构的挑战 3. JWT 与 Cookie-Session 的对比 OverView 即使只限定在“软…

rustDesk远程软件,强的可怕

背景 最近在做一个机房的远程运维&#xff0c;对面系统都是windows的&#xff0c;远程本来采用的向日葵&#xff0c;开两三个窗口就不能再多开了&#xff0c;没办法冲了年费瓜子会员&#xff0c;开通会员之后&#xff0c;确实好很多。 随后又增加了一个值班人员&#xff0c;我…

HarmonyOs 应用基础--ArkTS-核心-基础

目录 八. ArkTS-语句-类型进阶与渲染控制 1. 对象进阶 1.1. 定义对象数组 1.2. 使用对象数组 2. 渲染控制 - ForEach 2.1. ForEach语法 2.2. ForEach使用优化代码 2.3. 案例-学生档案 实现思路 3. Math对象 4. 综合案例 -- 抽奖卡案例 4.1. 初始页面布局&#xff08;静…

手机到了外地ip地址就变了吗

手机到了外地IP地址就变了吗&#xff1f;随着智能手机的普及&#xff0c;人们越来越频繁地使用手机进行各种网络活动。然而&#xff0c;关于手机IP地址是否会随着地理位置的变化而改变&#xff0c;许多用户仍心存疑惑。本文将深入探讨这一问题&#xff0c;揭示IP地址变化的奥秘…

【C++ 09】继承

文章目录 &#x1f308; 一、继承的概念及定义⭐ 1. 继承的概念⭐ 2. 继承的定义&#x1f319; 2.1 定义格式&#x1f319; 2.2 继承方式和访问限定符&#x1f319; 2.3 继承父类成员访问方式的变化&#x1f319; 2.4 默认继承方式 &#x1f308; 二、父类和子类对象赋值转换⭐…

分布式通信:多计算平台的任务分配

目录 1. 分布式通信 1.1 树莓派配置流程​编辑 1.2 树莓派和laptop处于同一网络​编辑 1.3 laptop配置 1.4 通信测试 1.5 分组通信 ​编辑 1.6 分布式通信测试 ​编辑参考资料 1. 分布式通信 机器人体积较小&#xff0c;采用树莓派作为控制器&#xff0c;实现传感器处…