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
收藏 0
分享 0
回答1
最佳
-
img是独立于picture的,如果浏览器支持两种格式,就会显示两张图。
picture下两个资源都用source标签引入,浏览器会显示支持的第一张图。支持 0 反对 0 举报2021-11-26 06:54