Astro结合React开发：AVIF图片在iPhone移动端无法渲染求助

核心原因 #

iPhone13若运行iOS 15.4以下版本，无论是Safari还是基于WebKit内核的Chrome（iOS所有第三方浏览器均采用WebKit内核），都不支持AVIF格式——AVIF在iOS Safari的正式支持始于iOS 15.4版本。

具体修复方案 #

1. 用<picture>标签提供降级格式

修改ImageWBorder组件，通过<picture>标签为不支持AVIF的设备提供WebP、JPG等兼容格式作为兜底：

return (
  <div className="aspect-square relative z-10 h-64 sm:h-72 sm:h-80 mobile:h-96 xl:h-100">
    <picture>
      <source srcSet="images/pix.avif" type="image/avif" />
      <source srcSet="images/pix.webp" type="image/webp" />
      <img
        alt={alt}
        src="images/pix.jpg"
        className="object-cover w-full h-full rounded-full"
      />
    </picture>
    <div style={{ zIndex: -1 }} className={styles} />
  </div>
)

浏览器会自动优先加载自身支持的格式，实现无缝降级。

2. 检查服务器AVIF MIME类型配置

部分服务器默认未正确设置AVIF的MIME类型（应为image/avif），配置错误会导致iOS浏览器拒绝加载图片：

• Nginx：在配置文件中添加 types { image/avif avif; }
• Apache：在.htaccess文件中添加 AddType image/avif .avif

3. 改用Astro内置<Image>组件

Astro内置图片组件可自动处理格式兼容、响应式优化，无需手动编写<picture>结构：

import { Image } from 'astro:assets';

return (
  <div className="aspect-square relative z-10 h-64 sm:h-72 sm:h-80 mobile:h-96 xl:h-100">
    <Image
      src="images/pix.avif"
      alt={alt}
      className="object-cover w-full h-full rounded-full"
      formats={['avif', 'webp', 'jpg']}
    />
    <div style={{ zIndex: -1 }} className={styles} />
  </div>
)

该组件会自动生成包含多格式的<picture>代码，同时优化图片体积。

内容的提问来源于stack exchange，提问作者Ben Shekhtman