做电商网站注意什么问题,哪个网站代做装修效果图,地方网站怎么做,百度做广告多少钱背景
前端开发时#xff0c;有些img标签的src属性的值来源于接口#xff0c;在接口获取结果之前#xff0c;这个src应该设置为什么呢#xff1f;
误区#xff1a;设置为#
有人把src设置为img src# /。
这是有问题的#xff0c;浏览器解析…
背景
前端开发时有些img标签的src属性的值来源于接口在接口获取结果之前这个src应该设置为什么呢
误区设置为#
有人把src设置为img src# /。
这是有问题的浏览器解析时遇到#就会去把当前的URL再获取一遍通常会拿到一个HTML文档就是当前页面的HTML文档然后赋值给这个图片但是图片解析失败图片就展示了报错。
总结一下有2个问题
当前URL被多加载了一遍浪费了流量。图片展示为加载失败控制台Console也会提示报错。 误区设置为空字符串或不设置
这一点比设置为#好很多不存在上述问题。
在Mac电脑下img只是个空的占位符并无异样。但是Windows上、手机上一些浏览器兼容并不好会出现灰色边框你需要加个CSS样式补救一下
img[src], img:not([src]) { opacity:0;
}
一种解决方案Loading态
在React或Vue中你可以方便的设置Loading状态当API请求不成功时不展示那个img标签请求拿到结果后再展示img。或者预先设置一个“加载中”的图片给img。
这是现代前端开发都会采用的方案。
另一种解决方案用 1 * 1 透明图片
如果你有一些原因不想使用Loading态那么你可以先给img的src用base64编码设置一个 1 * 1 的透明图片这样就规避了各种样式问题了。
用大小1 * 1就是为了保证够小用base64编码就是为了避免多余的网络请求开销用透明图片就是为了不影响现有的背景样式让用户以为这里暂时没东西。
如何最小呢主要试试PNG、GIF、WEBP格式就可以了JPG不支持透明。
欢迎收藏以后备忘。
GIF最稳定
78个字符不存在兼容性问题。推荐使用。
img srcdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
GIF最短
74个字符但存在兼容性问题不建议用。
img srcdata:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw PNG比较长
114个字符太长了不建议用。
img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII WEBP比较长
123个字符太长了不建议用。
img srcdata:image/webp;base64,UklGRkIAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAaAAAAMAEAnQEqAQABAACADiWkAANwAP7/YBgAAAA SVG不是1*1
64个字符使用空白SVG实现但是SVG不指定大小的话尺寸不是1*1。
img srcdata:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg/%3E
