您的网站图片也不显示？禁用响应式图片加载属性srcset和sizes吧

可能因为第一次有自己的网站所以更新网站兴趣比较高，没想到今天刚打开网站突然发现所有网站文章里的图片全部不能显示了，如图1

图一

但文章的预览图都还可以显示，而且进wordpress网站文章编辑后台也可以看到图片如图二

图二

甚至看到文章编辑源代码模式里图片路径地址也是对的，用的是又拍云存储的如图三所示

图三

但进网站前台页面的文章详情页面“勿忘初心，我第一个网站的第一篇文章”点击显示不了的图片属性右键路径却是wordpress本地地址路径的/wp-content/uploads/如图4所示，

但我明明本地电脑并没有图片存储，而是已经存在了又拍云存储服务器里，我的wordpress网站用的是又拍云的官网Hacklog Remote Attachment Upyun插件,上次文章封面图片无法显示找了很久才发现是又拍云存储我开启了Token防盗链的原因，后来关了就可以显示了，这次我又以为是这个原因，结果发现不是，要不然前几天为什么文章内部的图片可以显示为什么现在不显示了。一直觉得又拍云Hacklog Remote Attachment Upyun插件有很大的问题，不过一直没有能力升级，插件作者好像也不更新了。

为找不到wordpress前台文章显示不了图片而焦虑之际查看文章“勿忘初心，我第一个网站的第一篇文章”前端代码才发现图片路径后面莫名其妙了多了几种尺寸的属性如图5所示

图5

我是第一次见到这种情况，原来右键图片属性的路径在这里可以看到，一直搞不懂为什么会出现这种图片地址，后来才知道这2个是WordPress响应式图片属性srcset和sizes。为什么会出现这种情况，我想起来我在设置又拍云存储的开启了“WebP自适应”这种最新的图片格式，是这个原因导致的吗，生成自适应图片，还是因为我用的是最新版的wordpress导致的，到现在我还不知道。请网友帮我解答原因，谢谢。

找到了莫名其妙出现的WordPress响应式图片属性srcset和sizes怀疑就是他导致的网站前台显示不了图片的原因，那我如果去掉这个自动生成的WordPress响应式图片属性srcset和sizes是不是就可以显示网站图片了？修改wordpress我一直使用万能的主题Functions.php文件，当然主题Functions.php文件操作不当也很危险，我以后一定要写一篇wordpress主题Functions.php文件大全，它的功能太强大了，我在主题Functions.php文件中去掉响应式图片属性srcset和sizes的代码如下：

//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）

function disable_srcset( $sources ) {

return false;

}

add_filter( \'wp_calculate_image_srcset\', \'disable_srcset\' );

或者用代码：

//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）

add_filter( \'max_srcset_image_width\', create_function( \'\', \'return 1;\' ) );

保存，备份原来的functiaons.php文件有时候备份也没用已经永久修改了网站，所有要特别小心操作这个文件，刷新缓存后果然图片可以在网站显示了。

我不知道这算不算从根本上解决WordPress响应式图片属性srcset和sizes导致网站显示不了图片的问题，毕竟不管是又拍云存储“WebP自适应”还是响应式图片都是最新流行的图片应用，如今为了解决图片不了的问题而去掉这个属性功能是不是因人费事，还是有根本的解决之道？我这个半桶水希望专业的网友能帮我永久解决这个问题。希望高手跟我联系帮我解决这个问题。

WordPress响应式图片解决方案

对于博客或展示型企业站来说，内容比较单一，版面并不复杂，非常适合制作成响应式网站。在响应式网站设计中，对图片的处理非常简单，通常只需要以下CSS样式就可以完成：

img {max-width: 100{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3};height: auto;}

然后给具体的图片指定百分比的宽度，由于网站不同版块加载的图片宽度需求不同，所以不能在全局样式中指定。

看起来问题已经解决，但是存在一个问题，如果图片比较大，在PC端加载没有问题，但非Wifi连接下的移动端需要加载体积较大的图片不仅浪费流量，加载速度也不理想，因此需要给移动端指定不同的图片版本。

在前面的一篇文章中我介绍了禁止WordPress裁剪图片medium_large尺寸的方法，事实上WordPress指定medium_large的宽度为768，是为了生成图片的一个移动端版本，非常实用。

通常我们在主循环中调用缩略图的方法如下：

the_post_thumbnail( \\\'thumbnail\\\' );// 多媒体设置中的缩略图大小，默认值是150×150the_post_thumbnail( \\\'medium\\\' );// 多媒体设置中的中等大小，默认值是300×300the_post_thumbnail( \\\'medium_large\\\' );// 在WordPress 4.4版本中引入，宽度为768，高度不限制，不能在多媒体设置中修改the_post_thumbnail( \\\'large\\\' );// 多媒体设置中的大尺寸，默认值是1024×1024the_post_thumbnail( \\\'full\\\' );// 原图

the_post_thumbnail函数会输出img标签，如果只想返回结果而不是输出，那么可以使用get_the_post_thumbnail函数。

如果只想获取缩略图的地址而不包含img标签，那么相应的代码如下：

wp_get_attachment_image_url( get_post_thumbnail_id( $id ), \\\'medium_large\\\' );

$id为文章的id，首先用get_post_thumbnail_id函数获取该文章的特色图像id，然后用wp_get_attachment_image_url获取图片medium_large版本的地址。

掌握了以上知识，就可以在调用缩略图的时候根据设备来加载不同的图片版本：

<picture>    <source srcset=\\\"<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), \\\'medium_large\\\' ); ?>\\\" media=\\\"(max-width: 768px)\\\">    <source srcset=\\\"<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), \\\'full\\\' ); ?>\\\">    <img src=\\\"<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), \\\'full\\\' ); ?>\\\" alt=\\\"My default image\\\"></picture>

第一个source为小于或等于768的设备加载medium_large版本的图片，第二个source为大于768的设备加载原图，img标签是为那些不支持picture标签的浏览器准备的。

以上方法需要在发表文章的时候设置特色图像，如果你在编写文章的时候右下角没有设置特色图像的功能，请在functions.php函数中加入如下代码：

add_theme_support( \\\'post-thumbnails\\\' );

有人使用正则抓取文章第一张图片作为缩略图，个人不建议那样做，手动设置特色图像才是最佳方案。

那么，文章内容中的图片如何实现在移动端加载medium_large版本呢？值得高兴的是WordPress 4.4之后，自动过滤the_content，检查内容中的img标签，并在移动端自动输出medium_large版本的图片，而你什么也不必做。