一直走在全网营销路上。。。

图片路径错误居然是因为srcset

08-15 SEO

最近因为网站搬家,从老网站复制了几篇文章中的图片出现不显示的情况

图片路径错误
然后我们查看图片的路径,发现图片路径出现下面的情况:
图片路径错误
正确的路径应该是/upload/2019/06/fanyongboke.jpg,但是在后面出现了srcset属性,对于img的srcset属性我们一般用于设置不同屏幕密度下,image自动加载不同的图片。用法如下:
<img src="fanyongboke.jpg" srcset="fanyongboke.jpg 2x" />

使用上面的代码,就能实现在屏幕密度为1x的情况下加载fanyongboke-128.jpg, 屏幕密度为2x时加载fanyongboke-256.jpg。

按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片的话,太麻烦了。所以就有了新的srcset标准。代码如下:

<img src="fanyongboke-128.jpg"
  srcset="fanyongboke-128.jpg 128w, fanyongboke-258.jpg 256w, fanyongboke-512.jpg 512w"
  sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸临界点。img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到,已经全部都兼容了,可以放心使用。
回到樊勇博客出现的问题,因为老网站图片是带srcset属性的,那么在复制文章和后台数据后,也需要去掉图片的srcset属性,复制图片的原路径,然后删掉图片,重新填写路径上传就解决了这个问题。
博主还在研究更简单的解决办法,出结果了再来更新。

版权保护: 本文由樊勇博客原创,转载请保留链接: https://www.fanyongseo.com/seo/71.html

一直走在全网营销路上。。。

联系我们佛系笔记