使用astro和react我有一个自定义的图像组件：
<ImageWBorder
src="images/pix.avif"
alt="main band image"
leftBorder
/>图像W边框
return (
<div className="aspect-square relative z-10 h-64 sm:h-72 sm:h-80 mobile:h-96 xl:h-100">
<img
alt={alt}
src={src}
className="object-cover w-full h-full rounded-full"
/>
<div style={{ zIndex: -1 }} className={styles} />
</div>
)图像在桌面上渲染良好，但在我的移动终端上没有.avif扩展名的图像渲染。我以为.avif在所有浏览器和操作系统上都得到了广泛支持？我正在Safari和Chrome上测试iPhone 13。还有人对这些问题有经验吗？
1条答案
按热度按时间yv5phkfx1#
虽然AVIF有越来越好的支持，但它仍然不是普遍的。Can I Use reports around 20% of users won’t be able to render AVIF images currently.只有iOS上的Safari 16似乎支持AVIF，Safari桌面还不支持它。因为iOS上的所有浏览器都使用Safari的引擎（包括Chrome），他们也将无法支持旧版本的iOS上的AVIF。
目前的解决方案是选择一种更广泛支持的图像格式，例如WebP或JPEG，或者使用
<picture>元素的响应图像技术来提供多种格式。这允许不支持AVIF的浏览器退回到另一种格式。例如：