<image>的src属性的使用
刚接触前端不久。怎么用image显示图片是个问题,怎么使用数据流还是base64呢?小小的研究一下
<image src="url">
1.接口返回数据流,src可以直接写接口url可以显示图片。
2.接口返回图片的base64,src要写成Data URI scheme,比如:
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件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图片数据
<image>的src属性的使用的更多相关文章
- 解决javascript动态改变img的src属性图片不显示问题
首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById( ...
- 直接用<img> 的src属性显示base64转码后的字符串成图片
直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="base64转码后的字符串" ></img> 下面的图片 ...
- ie6下使用js替换img标签src属性图片不显示的错误
首先,我必须再次强调一下,F-U-C-K I-E! 其次,简单阐述一下这个bug的出现的情况.页面中有个<a href=”javascript:void(0)” onclick=”swapImg ...
- jquery得到iframe src属性值的方法
这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...
- IE6 js修改img的src属性问题
今天在做项目,有个点击按钮切换图片功能,即修改img的src属性,在IE6下测试,切换图片不显示,右键选择显示图片,可以显示出来,琢磨了很久,最终发现是因为该按钮是a标签导致的, 随后上网查了下,有些 ...
- 如何判断img标签是否有src属性
前几天,写一个小项目,需要判断img标签是否有src属性,想了半天,只能想到用jq实现,如下: if($(".img").attr("src")==undefi ...
- vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
- 获取标签的src属性兼容性
获取节点如script标签的src属性时,针对非IE6,IE7可以直接使用src属性,但在IE6-7中存在问题,可以借助getAttribute方法 getAttribute(attr,iflag) ...
- img没有src属性时自动出现边框
当img没有接收到src属性的时候会自动出现边框,border:0/none都不管用的情况下 解决方法 一行css 可以解决 img[src=""],img:not([src]){ ...
- 直接用<img> 的src属性显示base64转码后的字符串成图片【原】
直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="data:image/gif;base64,base64转码后的字符串" ...
随机推荐
- hadoop3.1.2队列
hapood3.1.2 capacity-scheduler.xml CDH6.2 在配置中输入fair,转成json格式看. yarn资源池配置: CDH--yarn--动态资源池配置 pool_d ...
- aws技术链接
S3: https://docs.aws.amazon.com/s3/?id=docs_gateway emrfs: https://docs.aws.amazon.com/emr/latest/Ma ...
- 初次shell编程
虽然说的是初次shell写xhell脚本,但是其实我也写了三.四个简单的脚本了.现在总结下写简单的shell脚本中遇到的一些小问题备忘一下吧. 首先是脚本文件是已.sh作为后缀的,可以先建一个.sh的 ...
- 云数据库 MariaDB 版
基于MariaDB企业版全球独家合作认证,提供Oracle兼容性及众多企业级数据库特性.支持包括MySQL InnoDB等多种存储引擎,为不同需求的用户提供灵活的选择. 请看视频简介 优势 Oracl ...
- 解决PowerDesigner提示This data item is already used in a primary identifier
解决PowerDesigner提示This data item is already used in a primary identifier 解决PowerDesigner提示This data i ...
- SQL数据库字段数据类型详细说明
这里先总结数据类型.MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 日期和时间数据类型 MySQL数据类型 含义 date 3字节,日期,格式:20 ...
- [转载]十六进制数的两种不同表示:0x和H
来源:https://blog.csdn.net/u013773644/article/details/519811860x是16进制的前缀,H是16进制的后缀 都是表示十六进制数,意义上没有什么区别 ...
- js之运算符(算术运算符)
Javascript中的运算符大多是由标点符号少数由关键字表示.可以根据其操作数的个数进行分类.大多数运算符是一个二元运算符,将两个表达式合成一个比较复杂的表达式.还有需要注意的一点是运算符的优先级, ...
- 入门&常量&变量
位:二进制中,每个0或1就是一个位,叫做bit(比特) 字节:计算机最小是存储单元(byte或B) 8bit = 1B 常用cmd命令: 启动: Win+R,输入cmd回车切换盘符 盘符名称:进入文件 ...
- abap 优化之ST05
DATA: gt_mara TYPE TABLE OF mara. SELECT * INTO TABLE gt_mara FROM mara WHERE MATKL = 'L000001' %_hi ...