Next.js中如何在SSR模式下加载图片并在页面挂载时显示？

针对你用Next.js Image组件的场景，要让页面加载完成时图片就显示出来，可以从这几个方面调整：

• 关闭懒加载：Next.js Image默认开启懒加载（仅当图片进入视口才加载），要让页面初始化时就加载图片，给组件添加loading="eager"属性即可：

import Image from 'next/image';

<div>
  <Image
    src="https://picsum.photos/200/300"
    width="800"
    height="400"
    loading="eager"
  />
</div>

• 添加预加载标签：在页面的<head>区域（或_document.js的Head组件中）添加<link rel="preload">，提前告知浏览器预加载目标图片资源：

// 示例：在页面的next/head组件中添加
import Head from 'next/head';

<Head>
  <link
    rel="preload"
    as="image"
    href="https://picsum.photos/200/300"
  />
</Head>

如果图片是经Next.js优化的第三方资源，要确保href是最终的优化后URL，或者配合next.config.js的图片域名配置使用。

• 修正图片尺寸匹配：你当前代码里的width/height和原图200/300的比例不一致，Next.js会自动适配，但明确匹配的尺寸能减少布局偏移，让图片渲染更顺畅。如果需要自适应布局，可以搭配layout="responsive"或fill属性+容器样式，避免加载时的页面跳动。

• 优化图片加载链路：如果是自有图片，建议放在Next.js的public目录下，Next.js会自动压缩图片、转换为WebP等高效格式；如果是第三方图片，要在next.config.js中配置images.remotePatterns，让Next.js可以优化第三方图片资源：

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'picsum.photos',
        pathname: '/**',
      },
    ],
  },
};

配置后第三方图片会经过Next.js的优化处理，加载速度会更快。

把这些方法结合起来，就能实现页面加载完成时图片已显示的效果。

内容的提问来源于stack exchange，提问作者Solid1