Vue3 动态加载图片不显示问题

news2024/9/29 14:43:53

一、图片目录结构
在这里插入图片描述

二、批量导出图片

exportImage.ts

const images = import.meta.glob('@/assets/icons/*.{png,jpg,jpeg,svg}', { eager: true });

const imageMap = Object.entries(images).reduce((acc, [key, value]) => {
  const imageName = key.split('/').pop().replace(/\.[^/.]+$/, ''); // 移除文件扩展名
  acc[imageName] = value.default;
  return acc;
}, {});

export default imageMap;

二、在组件中使用
在这里插入图片描述

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

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

相关文章

PDF对话RAG应用开发实战

与大型 PDF 对话很酷。你可以与笔记、书籍和文档等聊天。这篇博文将帮助你构建一个基于 Multi RAG Streamlit 的 Web 应用程序,以通过对话式 AI 聊天机器人读取、处理和与 PDF 数据交互。以下是此应用程序工作原理的分步分解,使用简单的语言易于理解。 N…

运用电磁铁需求注意哪些问题

电磁铁是比较常用的磁场设备,在与磁性研究相关的实验室里,我们能经常看到,那磁场设备在使用的时候,包括各类电磁铁、亥姆霍兹线圈、螺线管等,有什么需要注意的事项呢? 电磁铁设备主要包括电磁铁以及配套电…

大跳水!华为三折叠手机黄牛价暴跌,市场需求显真相

华为首款三折叠手机Mate XT上市初期受到黄牛热炒,但由于实际需求不足和定价过高,市场溢价迅速下跌,反映出折叠屏手机市场仍需培养消费者接受度。 转载:科技新知 原创 作者丨依蔓 编辑丨蕨影 惊了!华为首款三折叠手机M…

Electron 主进程与渲染进程、预加载preload.js

在 Electron 中,主要控制两类进程: 主进程 、 渲染进程 。 Electron 应⽤的结构如下图: 如果需要更深入的了解electron进程,可以访问官网 流程模型 文档。 主进程 每个 Electron 应用都有一个单一的主进程,作为应用…

如何通过VSM识别生产过程中的信息流浪费?

VSM(价值流图),作为精益生产的核心工具之一,它不仅仅是一张简单的流程图,更是企业优化生产流程、提升价值传递效率的指南针。通过VSM,我们可以清晰地看到从原材料到成品交付的全过程,包括物料流…

kafka集群跨双网段及多网段通信问题解决(避免踩坑)

一、问题场景: 实际生产环境总存在很多kafka集群跨网段的问题。kafka集群可能存在多个网卡,对应多个网段。不同网段之间需要同时与集群通信,即跨网段生产消费问题。 单机 # broker 的唯一标识符,在 Kafka 集群中必须唯一 broker.…

uniapp修改uni-ui组件样式(对微信小程序/H5有效,vue3)

寻找要修改的样式 使用开发者工具找到具体要修改的class类名 修改 <style lang"scss">//.nav为上一级的class.nav::v-deep .uni-navbar--border {border-bottom-style: none !important;} </style>完整代码 <template><view><uni-na…

基于SpringBoot+Vue的在线考试管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

24年Novartis诺华制药社招入职SHL测评:综合能力、性格问卷、动机问卷高分攻略

尊敬的求职者&#xff0c;若您渴望在医药行业的领军企业——诺华制药——开启您的职业生涯&#xff0c;深入了解其社招与校招测评流程至关重要。以下是对诺华SHL测评题型的全面解读&#xff0c;助您在招聘季脱颖而出。 测评构成 诺华的招聘测评由以下三个部分组成&#xff1a…

Arthas trace (方法内部调用路径,并输出方法路径上的每个节点上耗时)

文章目录 二、命令列表2.3 monitor/watch/trace/stack/tt 相关2.3.3 trace &#xff08;方法内部调用路径&#xff0c;并输出方法路径上的每个节点上耗时&#xff09;举例1&#xff1a;查看方法整体耗时举例2&#xff1a;trace次数限制 本人其他相关文章链接 二、命令列表 2.3…

【项目总结】工程构建思路分析与分享

背景 写这篇文章的初衷是因为国产化项目临近结束&#xff0c;在做项目总结时&#xff0c;回想起了代码管理的相关问题。虽然工程搭建及管理是一个高级工程师必备的能力&#xff0c;但似乎每次一个新项目立项&#xff0c;都是从老的项目中拷贝工程框架&#xff0c;再进行定制修…

【C++】C++17中可以存储任意类型数据的对象——any类的使用与设计思想

目录 引言 any类的使用 构造 号运算符重载 std::any::swap std::any::has_value std::any::type std::any::reset std::any_cast any类的设计思想 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 C专栏&#xff1a;C_东洛的克莱斯韦克的博客-CSDN博客 引言 一提到存…

按键 tab 则 切换输入框, 按键 ↑↓ 则 加减数值

1) 页面内输入框,按键 tab 则 切换输入框, 按键 ↑↓ 则 加减数值 2) 思路 1、按键 tab切换input框&#xff0c;默认tab切换会聚焦到浏览器地址栏&#xff08;F12时会聚焦到开发者工具选项&#xff09;&#xff0c;我们需要阻止该默认事件。 2、进入页面就聚焦到第一个输入框…

【JAVA基础】lombok的@Data会生成什么?和无参构造器有关系吗

问题&#xff1a; 前提&#xff1a;实体中有三个属性&#xff1b;问题一、lombok在实体上如果只加Data会生成哪些构造器。问题二 编译器默认生成无参构造器&#xff0c;如果自己写了有一个参数的构造器&#xff0c;还会生成默认的无参构造器吗 &#xff1f; 问题一解答 当在Jav…

免费送源码:Java+B/S+ssm+MySQL 公众养老服务网上预订系统 计算机毕业设计原创定制

摘 要 本论文主要论述了如何使用JAVA语言开发一个公众养老服务网上预订系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;SSM框架进行开发。在引言中&#xff0c;作者将论述公众养老服务网上预订系统的当前背景以及系统开发…

本地生活服务项目有哪些:如何利用本地生活市场,打开线下流量!

随着各大互联网公司在本地生活服务板块的布局力度持续加大&#xff0c;越来越多的人都开始意识到了它背后所蕴含着的发展前景和收益潜力&#xff0c;进而纷纷打听起了与之相关的消息。而就小编与多位创业者的交流情况而言&#xff0c;在众多问题中&#xff0c;属本地生活服务项…

巨控协议转换网关GRM321GRM322GRM323应用场景

巨控工业协议网关GRM321,GRM322,GRM323是网口型网关&#xff0c;支持各种PLC的TCP协议&#xff0c;具备多路RS485,RS232和三个TCP网口。能实现RS485&#xff0c;RS232和TCP的工业协议的零代码无缝转换&#xff0c;能极大节约工程师编程时间&#xff0c;保障数据采集的可靠性。 …

遥感图像分割

遥感图像分割是一种应用于遥感图像的计算机视觉技术&#xff0c;用于将图像划分为不同的区域&#xff0c;每个区域代表地表的不同特征&#xff0c;如水体、森林、城市区域等。这种分割帮助我们更好地理解和分析地球表面的变化&#xff0c;对于环境监测、城市规划、农业、灾害管…

阿里云ACP云计算高级工程师知识点,超详细,看完就够了!

本文以访问控制章节知识点为例&#xff0c;不说废话直接上干货&#xff01; 考法1&#xff1a;VPC访问控制方式对比 1.VPC可以通过安全组、防火墙、RDS白名单、SLB白名单等方式进行访问控制。 2.专有网络内的ECS使用安全组防火墙进行三层网络访问控制&#xff0c;ACL进行二层…

基于STM32的无人驾驶汽车路径规划与视觉识别系统

目录 引言项目背景环境准备 硬件准备软件安装与配置系统设计 系统架构关键技术代码示例 摄像头图像采集与处理路径规划算法实现实时视觉障碍物检测电机控制与执行应用场景结论 1. 引言 无人驾驶技术是当前自动化和人工智能领域的热门课题之一&#xff0c;涉及到复杂的感知、…