Next.js学习系列:资源、metadata和 CSS 3
资产
Next.js可以在顶级public
目录下提供静态资产,如图像。内部文件可以从应用程序的根目录引用,类似于pages
。public
该目录还可用于 、Google 站点验证和任何其他静态资产。查看静态文件服务文档以了解更多信息。public``````robots.txt
下载您的个人资料图片
首先,让我们检索您的个人资料图片。
- 以格式下载您的个人资料图片(或使用此文件)。
.jpg
- 在
public
目录内创建一个目录。images
- 将图片另存为目录中。
profile.jpg``````public/images
- 图像大小可以是 400px x 400px 左右。
- 您可以直接在
public
目录下删除未使用的 SVG 徽标文件。
未优化的图像
使用常规HTML,您可以按如下方式添加个人资料图片:
但是,这意味着您必须手动处理:
- 确保您的图像在不同的屏幕尺寸上具有响应性
- 使用第三方工具或库优化图像
- 仅在图像进入视口时加载图像
以及更多。相反,Next.js 提供了一个开箱即用的组件来为您处理此问题。Image
图像组件和图像优化
next/image
是HTML元素的扩展,是为现代网络而发展而来的。<img>
Next.js还默认支持图像优化。这允许在浏览器支持时以WebP等现代格式调整大小,优化和提供图像。这样可以避免将大图像传送到具有较小视口的设备。它还允许Next.js自动采用未来的图像格式,并将其提供给支持这些格式的浏览器。
自动图像优化适用于任何图像源。即使图像由外部数据源(如 CMS)托管,它仍然可以进行优化。
使用图像组件
Next.js 不是在生成时优化映像,而是根据用户请求按需优化映像。与静态站点生成器和纯静态解决方案不同,无论是发布 10 张图像还是 1000 万张图像,您的构建时间都不会增加。
默认情况下,图像是延迟加载的。这意味着您的页面速度不会因视口外的图像而受到惩罚。图像在滚动到视口时加载。
图像的呈现方式总是避免累积布局偏移,这是Google将在搜索排名中使用的核心Web Vital。
下面是一个使用 next/image
来显示我们的个人资料图片的示例。和 属性应该是所需的渲染大小,其纵横比应与源图像相同。height``````width
**注意:**稍后我们将在"抛光布局"中使用此组件,无需复制它。
import Image from ’next/image'
const YourComponent = () => ( <Image src="/images/profile.jpg" // Route of the image file height={144} // Desired size with correct aspect ratio width={144} // Desired size with correct aspect ratio alt=“Your Name” /> )
要了解有关自动图像优化的更多信息,请查看文档。
若要了解有关该组件的详细信息,请查看
Nextjs/images
的 API 参考。Image
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nextjs/nextjsbase/Next.js%E5%AD%A6%E4%B9%A0%E7%B3%BB%E5%88%97%E8%B5%84%E6%BA%90metadata%E5%92%8C-CSS-3/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com