求教:webp格式,CSS两个Picture标签出问题,一个重复,一个不显示

Wordpress, 购买的国外的模板,用常规图片格式是没问题的,但是用插件生成了WEBP格式图片,其他都正常,就这两个部分有问题! 因为wordpress本身不支持webp,所以那些模板作者也不提供支持,只能到这来问了!

以下LOGO部分,重复显示了webp 和 png 的LOGO (即同时显示了两张图)

<picture class="normal-logo">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png.webp"/>
<img src="https://www.shong.net/file/upload/202111/26/20211126094049329.png" alt="xxx"/>
</picture>

以下一个区块的内容,图片不显示:(空白,不显示)

<picture class="img bg-image">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg.webp 580w, https://www.shong.net/file/upload/202111/26/20211126094109331.jpg.webp 150w, https://www.shong.net/file/upload/202111/26/20211126094119332.jpg.webp 320w, https://www.shong.net/file/upload/202111/26/20211126094129333.jpg.webp 100w, https://www.shong.net/file/upload/202111/26/20211126094139334.jpg.webp 40w, https://www.shong.net/file/upload/202111/26/20211126094149335.jpg.webp 500w, https://www.shong.net/file/upload/202111/26/20211126094159336.jpg.webp 30w, https://www.shong.net/file/upload/202111/26/20211126094209337.jpg.webp 550w, https://www.shong.net/file/upload/202111/26/20211126094219338.jpg.webp 32w" sizes="(max-width: 580px) 100vw, 580px">
<img width="580" height="580" src="https://www.shong.net/file/upload/202111/26/20211126094059330.jpg" alt="xxx Creative Life Store - Live A Creative Life with xxx!" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg 580w, https://www.shong.net/file/upload/202111/26/20211126094109331.jpg 150w, https://www.shong.net/file/upload/202111/26/20211126094119332.jpg 320w, https://www.shong.net/file/upload/202111/26/20211126094129333.jpg 100w, https://www.shong.net/file/upload/202111/26/20211126094139334.jpg 40w, https://www.shong.net/file/upload/202111/26/20211126094149335.jpg 500w, https://www.shong.net/file/upload/202111/26/20211126094159336.jpg 30w, https://www.shong.net/file/upload/202111/26/20211126094209337.jpg 550w, https://www.shong.net/file/upload/202111/26/20211126094219338.jpg 32w" sizes="(max-width: 580px) 100vw, 580px">
</picture>

网站地址没放! 通过代码好像没看出哪有问题,出现这问题是为什么呢 ?

已解决 悬赏分:0 - 解决时间 2021-11-27 00:46
反对 0举报 0 收藏 0

回答1

最佳
  • @

    img是独立于picture的,如果浏览器支持两种格式,就会显示两张图。
    picture下两个资源都用source标签引入,浏览器会显示支持的第一张图。

    支持 0 反对 0 举报
    2021-11-26 06:54