我正在使用 <picture>
标记以设置具有 WebP 支持的响应式图像。
我正在提取同时具有 .web
的桌面图像和移动图像 URL和 .jpg
文件。
对于每种媒体,我给出 .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>
最佳答案
您在 srcset
中输入的所有 URL属性必须有效并且必须存在。
支持 WebP 的浏览器会尝试从 <source type="image/webp">
加载 URL。所有其他浏览器将尝试从 <source type="image/jpeg">
加载 URL .如果浏览器选择的 URL 不存在,它将 不是 回退到另一个 <source>
s。
您应该检查服务器端的图像文件是否存在。
关于php - WebP 后备图像未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59720491/