HTML中img标签base64显示图片

浅浅的花香味﹌ 2021-07-26 18:40 820阅读 0赞

在浏览网页的时候大家可能会注意到一个奇怪的现象，有的图片的路径后面是一串很长的字符串，例如：

data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMAAAABJRU5ErkJggg==

这其实是Data URI scheme，它的作用是将一些小型数据直接嵌入到网页中，从而可以不使用外部文件导入的方式加载。例如上面的例子就是一张图片。data表示取得数据的协定名称，image/jpg是数据类型名称，base64是数据的编码方法，逗号后面就是这个image/jpg文件base64编码后的数据。目前，Data URI scheme支持的数据类型有：

data:,文本数据 
    data:text/plain,文本数据 
    ;javascript:;,HTML代码 
    ;javascript:;;base64,base64编码的HTML代码 
    data:text/css,CSS代码 
    data:text/css;base64,base64编码的CSS代码 
    data:text/javascript,Javascript代码 
    data:text/javascript;base64,base64编码的Javascript代码 
    data:image/gif;base64,base64编码的gif图片数据 
    data:image/png;base64,base64编码的png图片数据 
    data:image/jpeg;base64,base64编码的jpeg图片数据 
    data:image/x-icon;base64,base64编码的icon图片数据

以img标签为例进行举例说明：

1、正常形式：

<img src=“./images/test.jpg”/>

2、base64转码后的形式：

<img src=“data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/>

发表评论取消回复

表情：

评论列表（有 0 条评论，820人围观）

还没有评论，来说两句吧...

相关阅读

相关前端 img标签显示 base64格式的图片

在做项目的时候，我从后端返回了一个base64格式的图片文件，想把它渲染在前端页面上，找了一下午都没有找到办法，最后终于找到了资料！哈哈！解决办法就是这样 ![70][]

深碍√TFBOYSˉ_/ 2023年10月10日 12:04/ 0 赞/ 42 阅读

相关 base64显示为图片

base64显示为图片格式：【data:$mimeType;base64,$base64Str】参数说明： $mimeType – 指图片的格式类型(ima

曾经终败给现在/ 2023年06月25日 06:14/ 0 赞/ 18 阅读

相关 html显示base64图片

1. 在base64字符串前添加`'data:image/png;base64,'` let base64 = ... // iVBORw0KGgoAAAANSUh

本是古典何须时尚/ 2023年02月15日 13:57/ 0 赞/ 18 阅读

相关 Base64加密后的二进制流用img标签显示

页面图片渲染的常用做法是直接在 img 标签内给 src 附一个 url 地址，交由浏览器去下载、缓存、渲染图片，如下图： ![在这里插入图片描述][202005282

男娘i/ 2023年02月13日 11:36/ 0 赞/ 17 阅读

相关 vue img标签显示默认图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

╰+哭是因爲堅強的太久メ/ 2022年11月15日 11:55/ 0 赞/ 325 阅读

相关 HTML标签img--改变图片尺寸

1、统一大小？我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。 ![Center][] 大家看的出来，非常的

梦里梦外;/ 2022年08月19日 11:28/ 0 赞/ 295 阅读

相关 html显示Base64图片

![Center][] [Center]: /images/20220714/5513e5fe4c6c4081aebe59f88e7c1410.png

喜欢ヅ旅行/ 2022年07月14日 14:19/ 0 赞/ 259 阅读

相关 img显示base64图片

<img alt="Red Star" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0e

短命女/ 2022年05月31日 05:16/ 0 赞/ 313 阅读

相关 IE浏览器中img标签不显示图片

转摘自:gonghao2014的[https://blog.csdn.net/GongHao2014/article/details/52779603/][https

以你之姓@/ 2022年05月27日 03:20/ 0 赞/ 432 阅读

相关 HTML中img标签base64显示图片

在浏览网页的时候大家可能会注意到一个奇怪的现象，有的图片的路径后面是一串很长的字符串，例如： data:image/jpg;base64,iVBORw0

浅浅的花香味﹌/ 2021年07月26日 18:40/ 0 赞/ 821 阅读