如何在Next.js中无需指定宽高渲染URL来源图片

你遇到的核心问题是：Next.js的Image组件对外部URL图片无法自动读取宽高元数据（本地图片可从文件系统获取元数据），因此直接设置width={0}和height={0}对外部图无效。以下是两种符合需求的解决方案：

方案一：动态获取外部图片的原始宽高 #

通过JavaScript动态加载图片并获取真实宽高，再传递给Image组件，确保图片以原始尺寸渲染。示例代码如下：

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function ExternalImage() {
  const [imgSize, setImgSize] = useState({ width: 0, height: 0 });
  const imgSrc = 'https://picsum.photos/200/300';

  useEffect(() => {
    const img = new Image();
    img.src = imgSrc;
    img.onload = () => {
      setImgSize({ width: img.width, height: img.height });
    };
  }, [imgSrc]);

  // 等待获取到尺寸后再渲染组件
  if (imgSize.width === 0) return null;

  return (
    <Image
      src={imgSrc}
      width={imgSize.width}
      height={imgSize.height}
      sizes="100vw"
      placeholder="empty"
      alt="External image"
    />
  );
}

方案二：结合容器的自适应尺寸（辅助优化） #

如果需要让图片在容器内自适应但保留原始比例，可以给Image组件包裹一个自适应容器，配合动态获取的尺寸使用，避免图片拉伸：

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function ExternalImage() {
  const [imgSize, setImgSize] = useState({ width: 0, height: 0 });
  const imgSrc = 'https://picsum.photos/200/300';

  useEffect(() => {
    const img = new Image();
    img.src = imgSrc;
    img.onload = () => {
      setImgSize({ width: img.width, height: img.height });
    };
  }, [imgSrc]);

  if (imgSize.width === 0) return null;

  return (
    <div style={{ maxWidth: '100%', width: 'fit-content' }}>
      <Image
        src={imgSrc}
        width={imgSize.width}
        height={imgSize.height}
        sizes="100vw"
        placeholder="empty"
        alt="External image"
      />
    </div>
  );
}

必做配置 #

必须在next.config.js中添加允许的外部图片域名，否则Next.js会拦截图片加载：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['picsum.photos'],
  },
};

module.exports = nextConfig;

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