js有一个Image组件，用于延迟加载图像，还为给定的图像提供了一个srcset。然而，有时我们希望为不同的设备提供不同的图像（艺术重定向）。Mozilla说我们应该为此使用<picture>元素，为不同的媒体查询提供不同的图像。我找不到一篇文章（即使在next.js官方文档中）告诉我们如何使用<Image>组件来做到这一点。可以吗？我怎样才能同时使用next.js <Image>组件和HTML <picture>元素？
srcset
<picture>
<Image>
k10s72fa1#
我已经搜索了数百个网站，这是唯一的解决方案，我发现它在Next.js（与tailwindcss）可行。
import Image from 'next/image' <div> <div className="md:hidden"> <Image src="Banner-767x500.webp" height={500} width={767} /> </div> <div className="hidden md:inline-flex lg:hidden"> <Image src="Banner-1023x500.webp" height={500} width={1023} /> </div> <div className="hidden lg:inline-flex xl:hidden"> <Image src="Banner-1400x500.webp" height={500} width={1400} /> </div> <div className="hidden xl:inline-flex"> <Image height={500} width={2000} src="Banner-2000x500.webp" /> </div> </div>
qco9c6ql2#
更好的方法是使用普通HTML，如下面的示例所示，在Next.js 13中测试。
<picture> <source srcSet="/portrait/my-dog.webp" media="(orientation: portrait)" /> <img src="/my-dog.webp" alt="A beautiful labrador" loading="lazy" /> </picture>
2条答案
按热度按时间k10s72fa1#
我已经搜索了数百个网站，这是唯一的解决方案，我发现它在Next.js（与tailwindcss）可行。
qco9c6ql2#
更好的方法是使用普通HTML，如下面的示例所示，在Next.js 13中测试。