我正在使用<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>
您在srcset
属性中输入的所有 URL 都必须有效且必须存在。
支持 WebP 的浏览器将尝试从<source type="image/webp">
加载 URL,所有其他浏览器将尝试从<source type="image/jpeg">
加载 URL。如果浏览器选择的 URL 不存在,则不会回退到其他<source>
之一。
您应该检查服务器端是否存在图像文件。