vue3引入本地静态资源图片

一、单张图片引入
import imgXX from '@/assets/images/xx.png'

在这里插入图片描述

二、多张图片引入

说明:import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

注意:填写自己项目图片存放的路径

/** vite的特殊性, 需要处理图片 */
export const requireImg = (imgPath:String) => {return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};

在这里插入图片描述

图片预览成功啦~
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis 7.x 系列【13】数据类型之地理位置(Geospatial)

有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 GEOADD2.2 GEODIST2.3 GEORADIUS2.4 GEOPOS2.5 GEORADIUSBYMEM…

多商户b2b2c商城系统怎么运营

B2B2C多用户商城系统支持多种运营模式,以满足不同类型和发展阶段的企业需求。以下是五大主要的运营模式: **1. 自营模式:**平台企业通过建立自营线上商城,整合自身多渠道业务。通过会员、商品、订单、财务和仓储等多用户商城管理系…

【Linux详解】进程地址空间

目录 研究背景 验证地址空间 实验一:父子进程变量地址一致性 实验二:变量值修改后父子进程的差异 分析与结论 实验三:进程地址空间验证 理解进程地址空间 区域与页表 写时拷贝机制 进程地址空间的意义 文章手稿: xmind…

grpc学习golang版( 二、入门示例 )

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、环境二、编写protobuf文件三、编写server服务端四、编写Clie…

Rust单元测试、集成测试

单元测试、集成测试 在了解了如何在 Rust 中写测试用例后,本章节我们将学习如何实现单元测试、集成测试,其实它们用到的技术还是上一章节中的测试技术,只不过对如何组织测试代码提出了新的要求。 单元测试 单元测试目标是测试某一个代码单…

A4-C四驱高防轮式巡检机器人

在当今数字化和智能化迅速发展的时代,旗晟智能带来了一款革命性的创新产品——A4-C四驱高防轮式巡检机器人。这款机器人以其卓越的性能和多功能性,为工业巡检领域带来了全新的解决方案。 一、产品亮点 1、四驱动力与高防护设计 四驱高防轮式巡检机器人…

环回接口处理 IP 数据报的过程及 Loopback 接口的主要作用

环回接口处理 IP 数据报的过程 IPv4 中 传给环回地址(127.0.0.1)的任何数据均作为 IP 输入,直接送到环回接口(环回:IP 输入队列)。 传给广播地址或多播地址的数据报,会复制一份传给环回接口&…

主从同步binlog

主从同步的原理是怎样的 提到主从同步的原理,我们就需要了解在数据库中的一个重要日志文件,那就是 Binlog 二 进制日志,它记录了对数据库进行更新的事件。实际上主从同步的原理就是基于 Binlog 进 行数据同步的。在主从复制过程中&#xff…

FastGPT 调用Qwen 测试Hello world

Ubuntu 安装Qwen/FastGPT_fastgpt message: core.chat.chat api is error or u-CSDN博客 参考上面文档 安装FastGPT后 登录, 点击右上角的 新建 点击 这里,配置AI使用本地 ollama跑的qwen模型 问题:树上有3只鸟,开了一枪&#…

外贸企业选择什么网络?

随着全球化的深入发展,越来越多的国内企业将市场拓展到海外。为了确保外贸业务的顺利进行,企业需要建立一个稳定、安全且高速的网络。那么,外贸企业应该选择哪种网络呢?本文将为您详细介绍。 外贸企业应选择什么网络? …

pytest-yaml-sanmu(五):跳过执行和预期失败

除了手动注册标记之外,pytest 还内置了一些标记可直接使用,每种内置标记都会用例带来不同的特殊效果,本文先介绍 3 种。 1. skip skip 标记通常用于忽略暂时无法执行,或不需要执行的用例。 pytest 在执行用例时,如果…

Redis 7.x 系列【14】数据类型之流(Stream)

有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 XADD2.2 XRANGE2.3 XREVRANGE2.4 XDEL2.5 XLEN2.6 XREAD2.7 XG…

【.Net】Web项目部署腾讯云

文章目录 总述前置准备docker-compose部署普通部署 参考 总述 前置准备 云服务添加端口 另有linux本身防火墙请参考: 【Linux】防火墙命令 需安装.Net SDK和Asp .Net Runtime 注意: 1、sdk也要不只是runtime 2、是Asp .Net Runtime不是.Net Runtime …

国产音频放大器工作原理以及应用领域

音频放大器是在产生声音的输出元件上重建输入的音频信号的设备,其重建的信号音量和功率级都要理想:如实、有效且失真低。音频范围为约20Hz~20000Hz,因此放大器在此范围内必须有良好的频率响应(驱动频带受限的扬声器时要…

BIOS设置与系统分区

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 目录 一BIOS 1破解密码的前提 2B…

Spring Cloud Gateway3.x自定义Spring Cloud Loadbalancer负载均衡策略以及实现动态负载均衡策略的方案

目录 前言 1.原理分析 1.1 ReactiveLoadBalancerClientFilter源码分析 1.2 LoadBalancerClientFactory源码分析 2.代码实现 2.1 扩展原生RoundRobinLoadBalancer轮询策略 2.1.1 自定义实现RoundRobinLoadBalancer 2.1.2 配置自定义的RoundRobinLoadBalan…

【web3】分享一个web入门学习平台-HackQuest

前言 一直想进入web3行业,但是没有什么途径,偶然在电鸭平台看到HackQuest的共学营,发现真的不错,并且还接触到了黑客松这种形式。 链接地址:HackQuest 平台功能 学习路径:平台有完整的学习路径&#xff…

金蝶云星空字段之间连续触发值更新

文章目录 金蝶云星空字段之间连续触发值更新场景说明具体需求:解决方案 金蝶云星空字段之间连续触发值更新 场景说明 字段A配置了字段B的计算公式,字段B配置了自动C的计算公式,修改A的时候,触发了B的重算,但是C触发不…

ABeam×StartUp | ABeam德硕中国新创部门拜访通用机器人初创公司 :逐际动力,就具身智能机器人的发展展开交流

近日,ABeam中国新创部门有幸拜访了深圳逐际动力科技有限公司(以下简称:逐际动力)。作为一家通用机器人公司,其在人形机器人、四轮足机器人等领域具有深厚的学术与技术储备。 现场合影 左:ABeam中国新创部门…

最快33天录用!一投就中的医学4区SCI,几乎不退稿~

【SciencePub学术】今天小编给大家推荐2本生物医学领域的SCI,此期刊为我处目前合作的重点期刊!影响因子0-3.0之间,最重要的是审稿周期较短,对急投的学者较为友好! 医学医药类SCI 01 / 期刊概况 【期刊简介】IF&…