php - WebP 后备图像未加载
问题描述
我正在使用<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 的浏览器将尝试从 加载 URL,<source type="image/webp">
而所有其他浏览器将尝试从 加载 URL <source type="image/jpeg">
。如果浏览器选择的 URL 不存在,则不会回退到其他<source>
s 之一。
您应该检查服务器端的图像文件是否存在。
推荐阅读
- python - 从 PIL 新创建的 Image 对象是什么格式?
- sql-server - 如何保证计算列中的信息删除后可以恢复?
- ios - 在核心数据中单独存储日值
- python - 如何在 Python3 中添加动态 MDC 到日志
- c# - 收到错误消息“当前上下文中不存在名称‘RouteConfig’”
- scripting - 用于将字符串中的特定单词更改为斜体的 DXL 脚本
- python - 如何在 pyarrow 中使用我们自己的模式从 CSV 创建镶木地板文件
- c - 如何在 printf() 语句本身中使用 pow() 函数?
- awk - 如果文件中的数字大于某个值,我必须发送邮件
- python - 通过 Python 观看 TXT 文件更新