如何用NextJS Image组件实现多场景图片适配及结合picture元素？

当然可以将原生的<picture>、<source>元素和NextJS的<Image>组件结合使用，既保留原生响应式图片的灵活控制，又能利用NextJS Image的优化能力（比如自动懒加载、格式转换、CDN加速等）。以下是具体实现方式：

基础实现示例 #

本地图片场景 #

首先通过import导入本地图片（NextJS会自动处理图片优化）：

import smallPortrait from '@/public/elva-480w-close-portrait.jpg';
import largeImage from '@/public/elva-800w.jpg';

然后在组件中用<picture>包裹<source>和<Image>：

<picture>
  {/* 小屏幕显示特写图 */}
  <source media="(max-width: 799px)" srcSet={smallPortrait.src} />
  {/* 大屏幕显示完整图 */}
  <source media="(min-width: 800px)" srcSet={largeImage.src} />
  {/* 兜底的Image组件，确保不支持picture的浏览器也能显示 */}
  <Image
    src={largeImage}
    alt="Chris standing up holding his daughter Elva"
    width={800}
    height={600} // 替换为图片实际尺寸
    priority={false} // 根据需求设置是否优先加载
  />
</picture>

远程图片场景 #

如果使用远程图片，需要先在next.config.js中配置允许的域名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-image-host.com',
        port: '',
        pathname: '/images/**',
      },
    ],
  },
};

module.exports = nextConfig;

然后在组件中直接使用完整URL：

<picture>
  <source media="(max-width: 799px)" srcSet="https://your-image-host.com/images/elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcSet="https://your-image-host.com/images/elva-800w.jpg" />
  <Image
    src="https://your-image-host.com/images/elva-800w.jpg"
    alt="Chris standing up holding his daughter Elva"
    width={800}
    height={600}
  />
</picture>

进阶：自适应容器与格式优化 #

如果需要图片自适应父容器尺寸，可以配合fill属性和父容器的相对定位：

<div style={{ position: 'relative', width: '100%', aspectRatio: '4/3' }}>
  <picture>
    {/* 优先加载webp格式（更小体积） */}
    <source media="(max-width: 799px)" type="image/webp" srcSet={smallPortraitWebp.src} />
    <source media="(max-width: 799px)" srcSet={smallPortrait.src} />
    <source media="(min-width: 800px)" type="image/webp" srcSet={largeImageWebp.src} />
    <source media="(min-width: 800px)" srcSet={largeImage.src} />
    <Image
      src={largeImage}
      alt="Chris standing up holding his daughter Elva"
      fill
      sizes="100vw" // 告诉浏览器图片在所有屏幕下占满视口宽度
      objectFit="cover" // 控制图片填充方式
    />
  </picture>
</div>

关键注意事项 #

• 本地图片必须通过import导入，不能直接写相对路径，否则NextJS无法优化图片
• <Image>组件作为兜底项必须存在，确保兼容性
• 若使用App Router（NextJS 13+）或Pages Router，上述写法均适用
• sizes属性配合srcSet能帮助浏览器更高效地选择合适的图片尺寸

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