如何将 next.js 图像组件与 HTML <picture> 元素一起使用？

Question

Next.js 有一个Image组件，可以延迟加载图像，并srcset为给定的图像提供 a 。

然而，有时我们想为不同的设备提供不同的图像（艺术重定向）。

Mozilla表示我们应该使用<picture>element 来实现此目的，为不同的媒体查询提供不同的图像。

我找不到一篇文章（即使在 next.js 官方文档中）来告诉我们如何使用<Image>组件来做到这一点。

是否可以？如何一起使用 next.js<Image>组件和 HTML<picture>元素？

Answer 1

我搜索了数百个网站，这是我发现在 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>