WebP回退图像未加载
WebP回退图像未加载
提问于 2020-01-14 00:29:47
我使用<picture>标签来设置一个支持WebP的响应式图像。我正在拉取同时包含.web和.jpg文件的桌面图像和移动图像URL。对于每个媒体，我提供了.webp版本和.jpg版本。
我期望的是，如果.webp版本不存在，网站将采用存在的.jpg文件。
你知道这里出了什么问题吗？
$image_desktop = get_field( 'desktop_image' ); // can be an .webp image or .jpg image
$image_mob = get_field( 'mobile_image' ); // can be an .webp image or .jpg image<picture>
<source media="(min-width: 480px)"
srcset="<?php echo esc_url( $image_desktop['url'] . '.webp' ); ?>"
type="image/webp">
<source srcset="<?php echo esc_url( $image_mob['url'] . '.webp' ); ?>"
type="image/webp">
<source media="(min-width: 480px)" srcset="<?php echo esc_url( $image_desktop['url'] ); ?>"
type="image/jpeg">
<source srcset="<?php echo esc_url( $image_mob['url'] ); ?>" type="image/jpeg">
<img class="header-image"
src="<?php echo esc_url( $image_desktop['url'] ); ?>"
alt="<?php echo esc_attr( $image_desktop['url'] ); ?>">
</picture>回答 1
Stack Overflow用户
发布于 2021-04-10 21:41:04
您放在srcset属性中的所有URL都必须是有效的并且必须存在。
支持WebP的浏览器将尝试从<source type="image/webp">加载URL，所有其他浏览器将尝试从<source type="image/jpeg">加载URL。如果浏览器选择的<source>不存在，它将不会回退到其他URL之一。
您应该检查服务器端是否存在镜像文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59720491
复制相关文章
相似问题
腾讯云开发者
