next.js 图像组件中的srcSet不工作,并且在接下来的js中不显示正确的图像

gcuhipw9  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(105)

这是我的Next.js代码

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

function index() {
  return (
    <>
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <Image
            src="/image/banner900x400.jpg"
            alt="Govind Hand Print Banner"
            fill={true}
            className={style.img}
            srcSet="/image/banner900x400.jpg 900w, /image/bedsheet.png 522w"
          />
        </div>
      </div>
    </>
  );
}

export default index;

字符串
中文(简体)

.img {
  object-fit: contain;
  width: 80% !important;
  position: relative !important;
  height: unset !important;
  border-radius: 10px;
}

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


在输出中,我只得到所有屏幕尺寸的banner900x400.jpg。在vs代码中,这是给出这样的错误“属性”srcSet“不存在于类型”IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes“我尝试srcset和srcSet这些都不工作。尝试在Web上找到答案,但无法找到任何东西

5m1hhzi4

5m1hhzi41#

查看此API参考-https://nextjs.org/docs/pages/api-reference/components/image
Next.js Image组件不支持像您尝试做的那样传递srcSet。您可以使用JavaScript处理此问题,例如使用自定义加载器函数或将图像URL存储在状态变量中。

相关问题