Nextjs 图像：使用链接预加载进行预加载，但在窗口加载事件后几秒钟内未使用

Question

Image我正在使用 Nextjs ，一个基于 React 的框架，并且我正在尝试在Next.js 提供的组件中显示 logo.png 图像。

我有这个文件夹：public/img

这是我的代码：

<Image
  src={'/img/logo.png'}
  width='154'
  height='82'
  alt='logo'
  layout='responsive'
  priority={true}
/>

我在控制台中收到此错误：

资源 http://localhost:3001/_next/image?url=%2Fimg%2Flogo.png&w=640&q=75 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。

有什么帮助吗？

Answer 1

将“placeholder”和“blurDataURL”道具添加到“下一张图像”并删除“priority”道具，有助于解决此问题

<Image
  src={'/img/logo.png'}
  width='154'
  height='82'
  alt='logo'
  placeholder="blur"
  blurDataURL={'/img/logo.png'}
/>

我删除了布局标签，因为我使用的是 Next.js 版本 13.1.1

如果上述方法不起作用，请确保您传递了 Sizes 属性

尺寸=“（最大宽度：768px）100vw，（最大宽度：1200px）50vw，33vw”

从文档中阅读更多内容

一个字符串，提供有关图像在不同断点处的宽度的信息。尺寸的值将极大地影响使用填充或样式为具有响应尺寸的图像的性能

例如，如果您知道您的样式将导致图像在移动设备上为全宽、在平板电脑上为 2 列布局、在桌面显示器上为 3 列布局，则应包含尺寸属性，如下所示：

import Image from 'next/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      fill
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

此示例的大小可能会对性能指标产生巨大影响。如果没有 33vw 大小，从服务器选择的图像宽度将是所需宽度的 3 倍。由于文件大小与宽度的平方成正比，如果没有大小，用户将下载比所需大小大 9 倍的图像。