[英]How to use next.js Image component with HTML <picture> element?
Next.js has an Image component that lazy loads images and also provides a srcset
for a given image. Next.js 有一个Image组件,可以延迟加载图像,并为给定图像提供srcset
。
However, sometimes we want to deliver different images for different devices ( art redirection ).然而,有时我们希望为不同的设备提供不同的图像(艺术重定向)。
Mozilla says we should use <picture>
element for this purpose, providing different images for different media queries. Mozilla说我们应该为此使用<picture>
元素,为不同的媒体查询提供不同的图像。
I can't find an article (even in next.js official docs) to tell us how can we do that using <Image>
component.我找不到一篇文章(甚至在 next.js 官方文档中)来告诉我们如何使用<Image>
组件来做到这一点。
Is it possible?是否可以? How can I use next.js <Image>
component and HTML <picture>
element together?如何同时使用 next.js <Image>
组件和 HTML <picture>
元素?
I have searched for hundreds of websites, this is the only solution I found which workable on Next.js ( with tailwindcss ).我搜索了数百个网站,这是我找到的唯一可在 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>
A better approach is to use vanilla HTML as the following example, tested in Next.js 13.更好的方法是使用香草 HTML 作为以下示例,在 Next.js 13 中测试。
Pros:优点:
Cons:缺点:
<picture>
<source srcSet="/portrait/my-dog.webp" media="(orientation: portrait)" />
<img src="/my-dog.webp" alt="A beautiful labrador" loading="lazy" />
</picture>
The new version of Next Image component removes a lot of the extraneous HTML and styles and allows full flexibility of the img
tag. Next Image 组件的新版本删除了大量无关的 HTML 和 styles 并允许img
标签的完全灵活性。 With that new improvement in the component we can use the picture tag and the image component as normal.通过组件的新改进,我们可以正常使用图片标签和图像组件。
Plus, Web.dev explains the way the picture element works really well: https://web.dev/learn/design/picture-element/另外,Web.dev 解释了图片元素的工作方式: https://web.dev/learn/design/picture-element/
In the same way that srcset builds upon the src attribute, the picture element builds upon the img element.与 srcset 建立在 src 属性之上的方式相同,picture 元素建立在 img 元素之上。 The picture element wraps around an img element. picture 元素环绕 img 元素。 If there is no img element nested inside the picture element, the picture element won't work.如果 picture 元素中没有嵌套 img 元素,则 picture 元素将不起作用。 Like the srcset attribute, the picture element will update the value of the src attribute in that img element.与 srcset 属性一样,图片元素将更新该 img 元素中 src 属性的值。 The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands.不同之处在于 srcset 属性向浏览器提供建议,而 picture 元素提供命令。 This gives you control.这给了你控制权。
So, understanding that the picture
element is just a wrapper of the img
element which the browser still requires, and using the new version of next/image (Nextjs v. 13), you can write it as:因此,了解picture
元素只是浏览器仍然需要的img
元素的包装,并使用新版本的 next/image (Nextjs v. 13),您可以将其编写为:
import Image from "next/image";
<picture>
<source srcset=".." media="..."/>
<Image src="..." height="..." width="..." alt="..." />
</picture>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.