如何在Next.js 13中设置Image组件以显示图片原始尺寸

当然可以让Next.js 13的Image组件显示图片原始尺寸，不用非得退回到普通img标签，以下是几种实用方案：

1. 本地图片：直接导入获取尺寸 #

如果是放在public目录下的本地图片，Next.js支持直接导入图片文件，同时会自动导出图片的width和height属性，直接传入Image组件即可：

import Image from 'next/image';
// 导入本地图片，路径根据实际情况调整
import productImage from '../public/products/photo.jpg';

export default function ProductPage() {
  return (
    <div>
      <Image
        src={productImage}
        width={productImage.width}
        height={productImage.height}
        alt="产品原图"
      />
    </div>
  );
}

2. 远程图片：预加载获取尺寸 #

对于远程图片（比如从CDN或第三方API获取的图片地址），可以在客户端通过原生Image对象预加载图片，获取到原始宽高后再传给Next.js的Image组件：

'use client'; // 标记为客户端组件
import Image from 'next/image';
import { useState, useEffect } from 'react';

// 封装一个自定义远程图片组件
export default function RemoteOriginalImage({ src, alt }) {
  const [imgDimensions, setImgDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const img = new window.Image();
    img.src = src;
    // 图片加载完成后获取原始尺寸
    img.onload = () => {
      setImgDimensions({
        width: img.width,
        height: img.height
      });
    };
  }, [src]);

  // 尺寸未获取到之前可以显示加载状态
  if (imgDimensions.width === 0) {
    return <div className="loading-skeleton">图片加载中...</div>;
  }

  return (
    <Image
      src={src}
      width={imgDimensions.width}
      height={imgDimensions.height}
      alt={alt}
    />
  );
}

3. 关闭优化实现自适应（简易方案） #

如果不需要Next.js的图片优化功能（比如图片本身已经经过压缩处理），可以开启unoptimized={true}，再配合CSS让图片自适应原始尺寸：

import Image from 'next/image';

export default function SimpleOriginalImage() {
  return (
    <Image
      src="https://example.com/remote-image.jpg"
      alt="原始尺寸图片"
      unoptimized={true}
      style={{ width: 'auto', height: 'auto' }}
    />
  );
}

注意事项 #

• 优先使用前两种方案，因为它们保留了Next.js Image组件的懒加载、格式转换等优化特性
• 第三种方案会关闭图片优化，适合对图片体积和加载性能要求不高的场景

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