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

Question

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

但是，有时我们希望为不同的设备提供不同的图像（艺术重定向）。

Mozilla 说我们应该为此使用 <picture> 元素，为不同的媒体查询提供不同的图像。

我找不到一篇文章（即使在 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>

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

How to use next.js Image component with HTML <picture> element?

html

image

next.js