【物以类聚】给el-image预览多张图片增加提示文字,让每张图片有所分类

news2024/11/6 7:07:43

【物以类聚】给el-image预览多张图片增加提示文字,让每张图片有所分类

  • 一、需求
  • 二、el-image
  • 三、实施步骤
    • 3.1 导包
    • 3.2 改造
    • 3.3 引入
  • 三、效果

一、需求

点击地图上的一张图片,弹出所有相关的图片资源,图片资源上显示每个图片的所属类型。

二、el-image

整个项目基于element-ui框架,调研后发现el-image组件大体适用,唯一不足的是缺少照片名称元素。

第一想法是修改依赖包中的文件,复用该组件,发现修改无效,原因是element-ui package中的文件是编译后的包,如果要改动,就需要重新编译1

第二想法,继承复用该组件,不属于包含关系,无法修改内部的元素,需求和这个想法不一致,遂改变。

和同事交流后,得出第三个想法,直接COPY框架的el-image组件文件到自己的项目中,在项目中直接引用。终见光明。

三、实施步骤

3.1 导包

将图片组件整体的文件导进来。
在这里插入图片描述

3.2 改造

修改elImageViewer组件。增加绝对布局组件。
在这里插入图片描述
修改urlList为对象数组,即
[ {name: '照片',url: ''} ]

3.3 引入

 <my-image ref="preview"
      style="width: 5px; height: 5px;position: absolute;top:0;right:0"
      :preview-src-list="srcList">
 </my-image>
import MyImage from '@/components/ELImage/index'

三、效果

可以看到居中显示的图片类型文字。
在这里插入图片描述


  1. 超完整版修改element ui源码的3种方式!!以及patch-package打补丁 ↩︎

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

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

相关文章

22k+star一款自托管的开源的的好用的碎片化笔记软件 Memos超级详细部署教程

目录 1.拉取镜像 2.启动 3.体验 4.源码地址 1.拉取镜像 docker pull neosmemo/memos:stable 2.启动 创建目录 mkdir -p /opt/memos/ 启动 docker run -d --name memos -p 10006:5230 -v /opt/memos/:/var/opt/memos neosmemo/memos:stable 3.体验 浏览器输入下面地址…

2023年全球软件架构师峰会(ArchSummit深圳站):核心内容与学习收获(附大会核心PPT下载)

本次峰会是一次重要的技术盛会&#xff0c;旨在为全球软件架构师提供一个交流和学习的平台。本次峰会聚焦于软件架构的最新趋势、最佳实践和技术创新&#xff0c;吸引了来自世界各地的软件架构师、技术专家和企业领袖。 在峰会中&#xff0c;与会者可以了解到数字化、AIGC、To…

彩超框架EchoSight开发日志记录

EchoSight开发记录 蒋志强 我会不定期的更新 开发进展。最近更新进展于2024年1月15日 1.背景 由于某些不可抗逆的原因&#xff0c;离开了以前的彩超大厂&#xff0c;竞业在家&#xff0c;难得有空闲的时间。我计划利用这段时间 自己独立 从零开始 搭建一套 彩超系统的软件工…

GLM-4多模态重磅更新!摸着OpenAI过河!

智谱CEO张鹏说&#xff1a;OpenAI摸着石头过河&#xff0c;我们摸着OpenAI过河。 摸来摸去摸了一年&#xff0c;以每3-4个月升级一次基座模型的速度&#xff0c;智谱摸着OpenAI过河的最新成绩到底怎么样&#xff1f;真如所说吗&#xff1f; 听到GLM-4发布的当天&#xff0c;我就…

FPGA物理引脚,原理(Pacakge and pinout)-认知3

画FPGA芯片引脚封装图&#xff08;原理&#xff09;&#xff0c;第一是参考开发板(根据一下描述了解总览&#xff09;&#xff0c;第二是研究Datasheet. ASCII Pinout File Zynq-7000 All Programmable SoC Packaging and Pinout(UG585) 1. Pacakge overview 1.1&#xff0…

小封装高稳定性振荡器 Sg2520egn / sg2520vgn, sg2520ehn / sg2520vhn

描述 随着物联网和ADAS等5G应用的实施&#xff0c;数据流量不断增长&#xff0c;网络基础设施变得比以往任何时候都更加重要。IT供应商一直在快速建设数据中心&#xff0c;并且对安装在数据中心内部/内部的光模块有很大的需求。此应用需要具有“小”&#xff0c;“低抖动”和“…

npm run dev 启动vue的时候指定端口

使用的是 Vue CLI 来创建和管理 Vue 项目&#xff0c; 可以通过设置 --port 参数来指定启动的端口号。以下是具体的步骤&#xff1a; 打开命令行终端 进入您的 Vue 项目目录 运行以下命令&#xff0c;通过 --port 参数指定端口号&#xff08;例如&#xff0c;这里设置端口号…

PBR材质纹理下载

03:10 按照视频里的顺序 我们从第6个网站开始倒数 点击本行文字或下方链接 进入查看 6大网站地址 网址查看链接&#xff1a; http://www.uzing.net/community_show-1962-48-48-35.html 06 Tectures Wood Fence 001 | 3D TEXTURES 简介&#xff1a;最大的纹理网站之一&#x…

2024美赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

操作系统-操作系统的发展与分类

文章目录 总览手工操作阶段批处理系统-单道批处理系统批处理系统-多道批处理系统分时操作系统实时操作系统其他操作系统小结 总览 绿框部分重点考察 手工操作阶段 有孔代表1&#xff0c;没孔代表0 程序写到纸带上&#xff0c;然后机器读取执行纸带上的内容&#xff0c;然后…

Python 一行命令部署http、ftp服务

Python 一行命令部署http服务 文章目录 Python 一行命令部署http服务具体操作命令如下浏览器返回下载Python 一行命令部署FTP服务 具体操作命令如下 这个比nginx相对来说更加简单&#xff0c;可以用于部署特殊场景时如银行等部署时&#xff0c;各种权限控制&#xff0c;内网之间…

Docker五部曲之五:通过Docker和GitHub Action搭建个人CICD项目

文章目录 项目介绍Dockerfile解析compose.yml解析MySQL的准备工作Spring和环境变量的交互 GitHub Action解析项目测试结语 项目介绍 该项目是一个入门CICD-Demo&#xff0c;它由以下几部分组成&#xff1a; Dockerfile&#xff1a;用于构建自定义镜像compose.yml&#xff1a;…

使用opencv把视频转换为灰色并且逐帧率转换为图片

功能介绍 使用opencv库把视频转换为灰色&#xff0c;并且逐帧率保存为图片到本地 启动结果 整体代码 import cv2 import osvc cv2.VideoCapture(test.mp4)if vc.isOpened():open, frame vc.read() else:open Falseos.makedirs("grayAll", exist_okTrue) i 0 wh…

深度学习和机器学习中针对非时间序列的回归任务,有哪些改进角度?

深度学习和机器学习中针对非时间序列的回归任务&#xff0c;有哪些改进角度&#xff1f; 目录 深度学习和机器学习中针对非时间序列的回归任务&#xff0c;有哪些改进角度&#xff1f;引言1 数据预处理2 数据集增强3 特征选择4 模型选择5 模型正则化与泛化6 优化器7 学习率8 超…

【RT-DETR有效改进】轻量级网络ShuffleNetV2(附代码+修改教程)

前言 大家好&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持ResNet32、ResNet101和PP…

StarRocks 生成列:百倍提速半结构化数据分析

半结构化分析主要是指对 MAP&#xff0c;STRUCT&#xff0c;JSON&#xff0c;ARRAY 等复杂数据类型的查询分析。这些数据类型表达能力强&#xff0c;因此被广泛应用到 OLAP 分析的各种场景中&#xff0c;但由于其实现的复杂性&#xff0c;对这些复杂类型分析将会比一般简单类型…

Resnet结构的有效性解释

Resnet结构的有效性解释 先看一看Resnet网络的块结构&#xff1a; 根据上图&#xff0c;设有函数 z ( l ) x ( l − 1 ) F ( x ) ( l − 1 ) (1) \mathbf{z}^{(l)}\mathbf{x}^{(l-1)}\mathcal{F}(\mathbf{x})^{(l-1)}\tag{1} z(l)x(l−1)F(x)(l−1)(1) 考虑由式 ( 1 ) (1…

广和通AI解决方案“智”赋室外机器人迈向新天地!

大模型趋势下&#xff0c;行业机器人将具备更完善的交互与自主能力&#xff0c;逐步迈向AI 2.0时代&#xff0c;成为人工智能技术全面爆发的重要基础。随着行业智能化&#xff0c;更多机器人应用将从“室内”走向“室外”&#xff0c;承担更多高风险、高智能工作。复杂的室外环…

小麦淀粉行业研究:预计2029年将达到13亿美元

此前&#xff0c;小麦淀粉整体市场价格稳定运行&#xff0c;8月下旬&#xff0c;受疫情、原料供应、运输和市场需求等多重因素影响&#xff0c;小麦淀粉价格上涨。9月份以来&#xff0c;小麦淀粉价格一直延续8月份价格稳定运行&#xff0c;无明显波动&#xff0c;走货较8月份有…

【leetcode】招商银行学习计划经典笔试题(java版本含注释)

目录 前言第一天21. 合并两个有序链表&#xff08;简单&#xff09;3. 无重复字符的最长子串&#xff08;中等&#xff09; 第二天1. 两数之和&#xff08;简单&#xff09;199. 二叉树的右视图&#xff08;中等&#xff09;124. 二叉树中的最大路径和&#xff08;困难&#xf…