Next.js Image组件srcSet不生效及类型报错问题求助

问题1：类型错误（Property 'srcSet' does not exist...） #

Next.js封装的Image组件（无论Pages/App Router版本）不支持直接传入srcSet属性，这是VS Code提示类型错误的核心原因。该组件的响应式图片逻辑是内置自动处理的，无需手动传入原生img的srcSet参数。

问题2：图片无法切换尺寸 #

你使用fill={true}同时通过CSS强制给Image组件设置position: relative !important，破坏了fill属性依赖的父容器定位逻辑，导致组件无法正确计算容器尺寸，进而无法触发响应式图片切换。

修复方案一：使用Next.js Image组件原生响应式（推荐） #

利用组件内置的图片优化与响应式能力，调整父容器样式适配fill属性：

修改后的Next.js代码

import React from "react";
import style from "@/styles/Home.module.css";
import Image from "next/image";

function index() {
  return (
    <>
      <div className="container">
        {/* 父容器作为定位容器，配合fill属性 */}
        <div className={style.imageContainer}>
          <Image
            src="/image/banner900x400.jpg"
            alt="Govind Hand Print Banner"
            fill
            className={style.img}
            // 定义不同屏幕下的图片显示宽度，组件自动生成适配的srcSet
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 80vw"
          />
        </div>
      </div>
    </>
  );
}

export default index;

修改后的CSS代码

/* 父容器设置定位与宽高比，匹配banner图的900:400比例 */
.imageContainer {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 900/400;
}

.img {
  object-fit: contain;
  border-radius: 10px;
}

@media screen and (max-width: 1170px) {
  .imageContainer {
    margin-top: 40px;
    width: 90%;
  }
}

修复方案二：手动用原生<picture>+<img>实现自定义srcSet #

如果需要完全自定义响应式逻辑，可跳过Next.js Image组件，直接使用原生HTML元素：

Next.js代码

import React from "react";
import style from "@/styles/Home.module.css";

function index() {
  return (
    <>
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <picture>
            {/* 屏幕宽度≤522px时显示小图 */}
            <source media="(max-width: 522px)" srcSet="/image/bedsheet.png" />
            {/* 默认显示大图 */}
            <img
              src="/image/banner900x400.jpg"
              alt="Govind Hand Print Banner"
              className={style.img}
            />
          </picture>
        </div>
      </div>
    </>
  );
}

export default index;

CSS代码

.img {
  object-fit: contain;
  width: 80%;
  border-radius: 10px;
}

@media screen and (max-width: 1170px) {
  .img {
    margin-top: 40px;
    width: 90%;
  }
}

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