关于Data URLs svg图片显示出错和浏览器URL hash #

最新推荐文章于 2024-08-21 23:17:57 发布
最新推荐文章于 2024-08-21 23:17:57 发布
阅读量643 收藏 1
点赞数 1
分类专栏： 开发事项 编程基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lger_Pro/article/details/89333663
版权
本文探讨了使用Data URLs格式的SVG图片在某些浏览器中出现显示异常的问题，特别是当URL包含特殊字符并作为hash时。73版谷歌浏览器和66版火狐浏览器对特定Data URLs的解析出现错误，可能是因为浏览器内部将其识别为位置标识符，导致数据丢失和解析异常。建议在使用Data URLs时注意URL编码和转义，以避免此类问题。
摘要由CSDN通过智能技术生成

在使用生成的svg图作为<img>标签是src值时，发现有部分浏览器显示异常，所以这里记录下

参考链接

Data URLs
http://www.faqs.org/rfcs/rfc2397.html
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs
URL hash
http://www.ruanyifeng.com/blog/2011/03/url_hash.html
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/hash

在<img src="Data URLs">中，Data URLs格式与显示情况如下：

//1. 部分浏览器不能正常显示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="#795548" x="0" y="0" width="100%" height=
最低0.47元/天 解锁文章
lger_Pro
关注
专栏目录
Chrome的启动参数
Criss@陈磊
02-23 4750
List of Chromium Command Line Switches Condition Explanation --[1]⊗ Classic, non-material, mode for the |kTopChromeMD| switch.↪ --0⊗ Value of the --profiler-timing flag that will disable timin...
svg2png:将 SVG 元素转换为 PNG 作为 dataURL
06-23
svg2png.js 将 SVG 元素转换为 PNG 作为 dataURL。 安装 $ bower install svg2png 用法 var svg = document.querySelector("svg"); svg2png(svg, function (err, dataURL) { console.log(dataURL); }); 贡献 叉它！ 创建您的功能分支： git checkout -b my-new-feature 提交您的更改： git commit -am 'Add some feature' 推送到分支： git push origin my-new-feature 提交拉取请求 :D 历史 0.1.0 第一个版本 执照 麻省理工学院
Vue 在data中引入图片路径报错？
Running_FE的博客
10-15 939
vue项目中在data设置图片路径，template中引入后页面无法显示图片，浏览器控制台报错，路径没问题还是找不到原因： 看了紫裳博主的文章才知因为Vue里动态生成的路径无法被url-loader解析到 方法一：直接将图片源文件放在项目目录的static文件，正常写就可以； <divv-for="(item,index)inimgSrc":key="index...
破解gcaptcha4.js中的w参数
最新发布
asfdsgdf的博客
08-21 744
'pow_msg': '1|0|md5|2022-03-25T14:23:36.364152+08:00|24f56dc13c40dc4a02fd0318567caef5|7e22264d4f3e4dd8a6ffbf6e82e1122d||29f07cebf938aa4e', // load请求返回加上某算法返回值。为了找到w参数的加密位置，我们可以搜索以下关键词：w、.w、'w'或"w"。'track': [[38, 18, 0], [1, 0, 33]......], // 轨迹。
SVG显示异常
蒋固金（jianggujin）的专栏
05-10 1万+
今天在部署程序的时候，发现在正式环境上面SVG无法正常显示，激动的心情立马被泼了一盆凉水，之前开发的时候是在Tomcat下面进行的，显示一切正常，正是环境为websphere，SVG就显示不出来了。 一开始猜测资源未找到，通过浏览器访问发现响应码为302，表示资源实际上是找的，既然资源存在，同样的浏览器，唯有环境不同，造成这种现象的原因应该就处在服务器上面了。
推荐一款高效、实用的 SVG 转换工具：SVG.toDataURL
gitblog_00006的博客
03-08 755
推荐一款高效、实用的 SVG 转换工具：SVG.toDataURL SVG.toDataURL 是一个在线工具，旨在帮助开发者更方便地将 SVG 图像转换为 Data URL 格式。通过使用这款工具，您可以轻松地在网页中嵌入 SVG 图片，并且避免了繁琐的文件上传与下载过程。 功能概述 SVG.toDataURL 提供了一个简洁易用的界面，可以快速实现以下功能： 将 SVG 文件或 SVG 代码...
SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader
学习笔记
01-03 8295
vue2 使用 require() 引入 svg 使用vue3 + ts + vite 使用 vite-svg-loader 插件引入svg 使用并最终实现代码提示一样使用图标文件。
【react笔记】关于在webpack.config.dev.js和webpack.config.prod.js里配置antd
supercolorpower的博客
12-21 8310
在.babelrc中配置antd的方法移步官网https://ant.design/docs/react/introduce-cn 另一种方法的前提是我们已经将配置文件暴露出来了。暴露方法https://blog.csdn.net/weixin_41606276/article/details/85123919 因为我的脚手架版本较高，所以现在网上的方法都不适用。在我的不断尝试下，终于配置成功...
渗透测试 2 --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
墨鱼菜鸡
07-11 3183
1、渗透测试 实用 浏览器插件 chrome、edge 插件：搜索 cookie，安装 cookie editor，打开插件，可以 导出 cookie HackBar ：Hackbar是网络安全学习者常备的工具 (https://www.fujieace.com/hacker/tools/hackbar.html )。 ​解决Firefox插件-H...
​​​​​​​自动化批量漏洞扫描脚本定制
悦分享
07-07 1487
github上找到一款并发框架[POC-T](https://github.com/Xyntax/POC-T)可以优美的进行并发操作，上面所述的内容大多可以用插件联合POC-T进行。因为POC-T不能一次使用多个插件，于是笔者对POC-T框架进行了一些小的改造，使其可以使用多个插件并发，而且不影响框架的扩展性。为了不和原有的插件冲突，fuzz功能加载插件在fuzz目录下，fuzz插件编写模式和其他插件一样。修改过程这样就不详细叙述了，修改的版本在https://github.com/boy-hack/POC
探究dataURI中使用SVG正确姿势
08-10
探究 dataURI 中使用 SVG 正确姿势
图片url生成svg元素节点
weixin_44643019的博客
12-26 276
图片url生成svg元素节点
解决使用svg绘制后下载图片以及下载svg内部嵌套image图片失败的问题。
陈先生的博客
11-18 1447
在使用svg进行图形绘制之后，可能需要下载已经绘制的svg图片，我们可能会遇到以下两种情况： 情况1： 情况2： 第一种是svg内部都是使用svg的方法进行绘制的，我们可以直接通过canvas的方法进行绘制下载，方法如下 第二种情况是在svg内部嵌套了一个image的图片，此时则无法使用第一种方法直接进行下载，下载的图片无内嵌图片，后来通过调查发下，需要把image引入的图片的路径更改微base64的方法后，再进行下载则可以实现，并解决问题。方法如下。 通过此种方法就可以解决svg内部嵌套image图片下载
img src请求后台，加载图片问题（svg不显示）
热门推荐
jiandan217的博客
01-26 3万+
今天项目要求后台管理系统中的图标和图片，于是楼主开始写代码，把图片存储到oracle数据库，取数数据后转化为流写入reponse，设置reponse头部，标识返回类型，正常图片类型都没有问题，png，jpg都可以正常加载，但是svg却不能显示，于是博主到处查资料也没有查到，因为src正常加载svg图片是显示的，所以一定有办法，最后对比了一下正常加载图片与后台返回流的reponse的响应头;
在Android中使用SVG图遇到的坑
weixin_42602900的博客
08-10 1116
在Android中使用SVG图遇到的坑
css data:image/svg+xml 不显示
foreverling_ling的博客
10-06 4561
原因：新版chrome不支持 # , 需要改成%23 如： .toggle:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-wi
svg模糊或不显示问题
weixin_45240168的博客
04-17 7474
问题简述 １．项目中使用的ｓｖｇ在苹果手机移动端，微信内置链接打开显示模糊。 ２.　经过查找资料，可以使用＜ｏｂｊｅｃｔ＞标签来嵌套ｓｖｇ可以解决ｓｖｇ模糊问题。 ３.　使用＜ｏｂｊｅｃｔ＞标签引发的问题，部分ｓｖｇ失去了点击事件的功能，经查证，不能点击的ｓｖｇ是因为在＜ｏｂｊｅｃｔ＞标签内的点击事件失效，把点击事件添加到父级元素即可。 ４.　经过一天时间，大量的ｓｖｇ不显示，原因是＜ｏｂｊｅｃｔ＞标签存在浏览器兼容问题，在手机其他浏览器中均可正常显示，但是使用微信内置的浏览器打开ｓｖｇ就不显示。 问题分析
DATA URL：嵌入 URL 中的数据资源
两个月亮
10-08 1985
小尺寸图片、文本等数据 直接嵌入在 URL 中，不需要通过网络连接从服务器中获取。有利于 降低服务器压力，提高 HTTP 请求的效率（HTTP 连接的建立与维护所耗费的资源多用于大型资源），从而提高网页的加载速度。Base64 编码使用的字符集是 URL 兼容的，这意味着它不包含 URL 特殊字符，如问号、斜杠、等号等。因此图片等二进制资源常使用 Base64 进行编码以方便资源的传输。但 Base64 编码通常会导致数据占用空间增大约 33%，这意味着资源在 DATA URL 中占用的内存空间会比原始资源
hide data URLs ALL
08-18
隐藏data URLs ALL是指隐藏所有的data URLs。Data URL是一种将图片数据以base64字符串格式嵌入到页面中的技术，可以减少对外部服务器的资源请求。隐藏data URLs ALL意味着不在请求中显示所有的data URLs。这可以用于保护数据的隐私，防止被他人获取。同时，隐藏data URLs ALL也可以提高页面加载速度，因为不需要再发送请求去获取这些资源了。在Requests Table中，可以通过设置来隐藏data URLs ALL，以保护数据的安全性和提高页面加载效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Python入门基础讲解（三）：网络面板](https://blog.csdn.net/Dangerous_li/article/details/127461176)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Python爬虫基础讲解（三）：网络面板](https://blog.csdn.net/m0_48405781/article/details/116668799)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值