实现svg图在Element+图片预览组件中显示

在 Element UI 的 el-image-viewer 组件中,直接使用 SVG 图片作为源是不直接支持的,因为 el-image-viewer 主要用于查看常规图像格式如 JPG, PNG 等。然而,你可以通过一些变通方法来展示 SVG 图片。

将 SVG 内容转换为 Data URL:

如果你有 SVG 的文本内容,你可以将它转换为 Data URL 并使用它:

const svgContent = `<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;

const svgBlob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
const svgUrl = URL.createObjectURL(svgBlob);
const imageList=[svgUrl]
  <el-image-viewer
    :url-list="imageList"
    :visible.sync="viewerVisible"
    @close="viewerVisible = false">
  </el-image-viewer>

另外如果后端返回的是SVG文本可以这样来操作

 首先,你需要将 SVG 文本转换为一个可用的 Data URL。这可以通过编码 SVG 文本并将其格式化为 Data URL 来实现。

const svgText = `<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="751" viewBox="0 0 500 751" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
<clipPath id="CLIPPATH_3">
    <rect transform="matrix(1 0 0 1 250.5 376)" x="-250" y="-375.5" rx="0" ry="0" width="500" height="751"></rect>
</clipPath>
</defs>
<g clip-path="url(#CLIPPATH_3)">
<g transform="matrix(1 0 0 1 250.5 376)" id="workspace">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(222,179,118); fill-rule: nonzero; opacity: 1;" x="-250" y="-375.5" rx="0" ry="0" width="500" height="751"></rect>
</g>
<g transform="matrix(1 0 0 1 250.5 389.36)" style="" id="issueDate-7e3ad9b1-85d8-469b-80bf-6b1192608bb6">
        <text xml:space="preserve" font-family="SimSun,STSong" font-size="20" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-50" y="-7.2772" t="1">2024年04月</tspan><tspan x="-50" y="19.8428">08日</tspan></text>
</g>
<g transform="matrix(1 0 0 1 103.3333 376)" style="" id="ee2682d9-61b2-45a4-887f-bd0801bba0d4">
        <text xml:space="preserve" font-family="SimSun,STSong" font-size="20" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-60" y="6.2828" t="1">颁发日期:</tspan></text>
</g>
</g>
</svg>`;

const encodedSvg = encodeURIComponent(svgText);
const dataUrl = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
const imageList =[dataUrl]

这样就能实现即使手里只有svg图或文本 也能用element组件预览它了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

神经网络:手写数字图像识别

一、导入相关库函数 import matplotlib.pyplot as plt import tensorflow as tf import keras import numpy as np 二、载入mnist数据集 使用keras.中的mnist数据集 (train_images, train_labels), (test_images, test_labels)\ keras.datasets.mnist.load_data() 三、测…

在微信上卖化妆品怎样发圈(学会写朋友圈段子卖货很简单)

大家好&#xff0c;我是只说人话&#xff0c;不讲概念&#xff0c;专给创业者们开思维脑洞 今天咱们要分享的内容比较有趣&#xff0c;教你如何写段子故事在朋友圈里做促销活动。 首先我们来看一个硬蹭明星热点的朋友圈案例。发朋友圈的是一位做装修的&#xff0c;在明星结婚的…

Python AI库 Pandas的常见操作的扩展知识

Python AI库 Pandas的常见操作的扩展知识 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 熟悉表格文件的基本操作 具备自主扩展学习能力 前文中对Pandas的数据结构以及基础操作做了介绍,本文中会在前文的基础上,对常见的操作进…

Python自动化系统6

元素的特征:根据页面设计规则&#xff0c;有些特征是唯一 开发遵循了这个规则 id :类比身份证号―仅限于当前页面 username username 注意:如果id 不是固定的话&#xff0c;就不能使用来定位! xpath: 1、绝对路径&#xff1a;/html/body/div/div/div[1]/a/b --根节点&#xff…

2024公共管理与社会发展国际学术会议(ICPMSD 2024)

2024公共管理与社会发展国际学术会议(ICPMSD 2024) 2024 International Conference on Public Management and Social Development 一、【会议简介】 2024公共管理与社会发展国际学术会议&#xff0c;将汇集全球顶尖学者&#xff0c;展开一场学术盛宴。 在这次会议上&#xff0…

【UE C++】设置游戏模式

问题 我们都知道如何使用蓝图创建一个游戏模式并且在这个游戏模式蓝图中去设置“默认pawn类”、“HUD类”、“玩家控制器类”、“游戏状态类”、“玩家状态类”、“旁观者类”。那么如何使用C完成该操作呢&#xff1f; 步骤 1. 首先创建“GameMode”、“GameState”、“HUD”…

如何用二维码实现现代仓库管理?

随着科技的进步&#xff0c;二维码技术逐渐应用与各个领域&#xff0c;其中在仓库管理中的应用也日益广泛。 那话不多说&#xff0c;我们直接来看如何用二维码实现现代仓库管理 简道云仓库管理模板&#xff0c;可以点击安装配合阅读&#xff1a;https://www.jiandaoyun.com 二…

Oracle集群ORA-03113:end-of-file on communication channel

一、问题场景描述 今天Oracle集群要更新各数据库的数据&#xff0c;折腾的启动不了了&#xff1a; --》数据量比较大&#xff0c;数据泵方式导出的dmp文件 准备导入集群 --》由于之前的生产数据库数据比较少&#xff0c;需要增大表空间。 --》于是在sqlplus命令窗口&#xff0c…

暗区突围端游海外版|暗区突围免费加速器有吗 免费加速器推荐

游戏中玩家可以创建男性或女性角色&#xff0c;可以通过选择脸型、发型、发色对人物形象进行调整&#xff1b;在进入游戏后&#xff0c;除人物性别不能修改&#xff0c;脸型、发型、发色都可以进行调整。除此之外可以在衣橱中对角色的上衣、手套、裤子、鞋子、帽子进行更换。游…

Leetcode—1017. 负二进制转换【中等】(string列表初始化、反向迭代器)

2024每日刷题&#xff08;120&#xff09; Leetcode—1017. 负二进制转换 实现代码 class Solution { public:string baseNeg2(int n) {string ans;while(n ! 0) {ans to_string(n & 1);n -(n >> 1);}return ans.empty() ? "0": string{ans.rbegin(),…

R语言详解二

一&#xff0c;列表详解 创建一个列表 > myList<-list(id2,name"张三",age20) > myList $id [1] 2$name [1] "张三"$age [1] 20 获取第一个元素 > myList[[2]] [1] "张三" 获取第一个子列表 > myList[2] $name [1] "张…

百度 测试|测试开发 面试真题|面经 汇总

百度测开 开发测试工程师 提前批一二三面面经 事业群&#xff1a;MEG base&#xff1a;北京 一面&#xff1a;2023.8.12 时长&#xff1a;50min 自我介绍 个人项目&#xff0c;我的项目是围绕着学校课程的项目来的&#xff0c;面试官就让我介绍这门课讲了些什么 &#xff…

信息化项目总体计划书(Word)

项目开发计划包括项目描述、项目组织、成本预算、人力资源估算、设备资源计划、沟通计划、采购计划、风险计划、项目过程定义及项目的进度安排和里程碑、质量计划、数据管理计划、度量和分析计划、监控计划和培训计划等。 软件全套精华资料包清单部分文件列表&#xff1a; 工作…

03-JAVA设计模式-模板方法模式

模板方法模式 什么是模板方法 模板方法模式&#xff08;Template Method Pattern&#xff09;在Java中是一种行为型设计模式&#xff0c;它定义了一个操作中的算法骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重新定义该算法的某…

7-34 通讯录的录入与显示

题目链接&#xff1a;7-34 通讯录的录入与显示 一. 题目 1. 题目 2. 输入输出格式 3. 输入输出样例 4. 限制 二、代码 1. 代码实现 #include <iostream> using namespace std;// 单条记录的信息 class infoContext { private:char name[11];char date[11];char man;c…

七、OSPF特殊区域及其特性

目录 OSPF区域分类 hello报文中option字段 1.末节区域&#xff08;Stub区域&#xff09; 2.完全末节区域&#xff08;Toally Stub区域&#xff09; 3.七类LSA 4.非完全末节区域&#xff08;NSSA区域&#xff09; 5.完全非完全末节区域&#xff08;Toally NSSA区域&#…

计算机服务器中了helper勒索病毒怎么办,helper勒索病毒解密流程工具

在网络技术飞速发展的今天&#xff0c;越来越多的企业离不开网络&#xff0c;网络可以为企业带来更高的生产效率&#xff0c;提供更多的便捷服务&#xff0c;但网络是一把双刃剑&#xff0c;在为人们提供便利的同时&#xff0c;也为企业的数据安全带来严重威胁。近日&#xff0…

微服务架构与SOA架构

SOA架构和微服务架构的区别 SOA关注的是服务重用&#xff0c;微服务在关注服务重用的同时&#xff0c;也同时关注快速交付&#xff1b; 微服务架构 80%的SOA服务架构思想 100%的组件化架构思想 80%的领域建模思想 首先SOA和微服务架构一个层面的东西&#xff0c;而对于ESB和…

Python_AI库 Numpy常用的统计函数介绍

Python_AI库 Numpy常用的统计函数介绍 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 熟悉表格文件的基本操作 具备基本的高等数学常识,能看得懂矩阵运算 具备自主扩展学习能力 本文涉及的函数主要包含&#xff1a; np.sum(arr…

自动化爬虫工具:you-get安装与使用

Windows下的安装命令&#xff1a; pip install you-get linux下的安装命令&#xff1a; pip3 install you-get 下载完成后&#xff0c;我们可以看到如下的警告&#xff0c;意思就是这个工具并未被添加到环境变量中&#xff0c;如果我们想在命令行中直接调用&#xff0c;需要…
最新文章