vue获取后台数据网址什么
介绍 (Introduction)
A Data URL is a URI scheme that provides a way to inline data in an HTML document.
数据URL是一种URI方案,它提供了一种内联HTML文档中的数据的方法。
Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img
tag to make the browser reference it from the network:
假设您要嵌入小图像。 您可以按照通常的方式,将其上传到文件夹并使用img
标签使浏览器从网络引用它:
<img src="image.png" />
or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.
或者您可以使用一种称为数据URL的特殊格式对其进行编码,从而可以将图像直接嵌入到HTML文档中,因此浏览器不必另外请求即可获取它。
Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.
数据URL可能会为小文件节省一些时间,但对于较大的文件,HTML文件的大小会有所增加,如果图像重新加载到所有页面上,则它们尤其会成为问题,因为您无法利用浏览器缓存能力。
Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.
此外,编码为数据URL的图像通常比二进制格式的相同图像大一点。
They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.
如果您经常编辑图像,它们并不实用,因为每次更改图像时,都必须重新编码。
That said, they have their place on the Web Platform.
也就是说,它们在Web平台上占有一席之地。
数据网址的外观 (How does a Data URL look)
A Data URL is a string that starts with data:
followed by the MIME type format. For example a PNG image has mime type image/png
.
数据URL是一个以data:
开头的字符串data:
后跟MIME类型格式。 例如,PNG图像的mime类型为image/png
。
This is followed by a comma and then by the actual data.
这之后是逗号,然后是实际数据。
Text is usually transferred in plain text, while binary data is usually base64 encoded.
文本通常以纯文本格式传输,而二进制数据通常以base64编码。
Here is an example of how such Data URL will look like:
以下是此类数据网址的示例:
<img src="data:image/png,%89PNG%0D%0A..." />
And here is a small version of the banner image of this article encoded in a link
Here is how a base64 encoded Data URL looks like. Notice it starts with data:image/png;base64
:
这是base64编码的数据URL的外观。 请注意,它以data:image/png;base64
开头:
<img src="https://img-blog.csdnimg.cn/2022010621262923569.png" />
And here is a small version of the banner image of this article base64 encoded in a link.
This site has a very nice Data URL generator: https://dopiaza.org/tools/datauri/index.php which you can use to transform any image sitting in your desktop to a Data URL.
这个站点有一个非常不错的数据URL生成器: https : //dopiaza.org/tools/datauri/index.php ,您可以使用它将桌面上的任何图像转换为数据URL。
Data URLs can be used anywhere a URL can be used, as you saw you can use it for links, but it’s also common to use them in CSS:
数据URL可以在可以使用URL的任何地方使用,如您所见,您可以将其用于链接,但是在CSS中使用它们也很常见:
.main {
background-image url('https://img-blog.csdnimg.cn/2022010621262923569.png');
}
浏览器支持 (Browser support)
They are supported in all modern browsers.
安全 (Security)
Data URLs can encode any kind of information, not just images, and so they come with their set of security implications.
数据URL不仅可以对图像进行编码,还可以对任何类型的信息进行编码,因此它们带有一系列安全隐患。
From Wikipedia:
从维基百科 :
The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.
数据URI可用于构造攻击页面,这些攻击页面试图从毫无戒心的Web用户那里获取用户名和密码。 它也可以用来解决跨站点脚本( XSS )的限制,将攻击有效载荷完全嵌入地址栏中,并通过URL缩短服务托管,而不需要由第三方控制的完整网站。
Check this article from the Mozilla Firefox Blog for more information on how Data URLs can be used by malicious users to do bad things, and how the Firefox browser mitigates such risks.
请查看Mozilla Firefox博客中的这篇文章,以获取有关恶意用户如何使用数据URL进行不良操作以及Firefox浏览器如何减轻此类风险的更多信息。
Data URLs are defined in RFC 2397.
数据URL在RFC 2397中定义。
vue获取后台数据网址什么