这是我的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上找到答案,但无法找到任何东西
1条答案
按热度按时间5m1hhzi41#
查看此API参考-https://nextjs.org/docs/pages/api-reference/components/image
Next.js Image组件不支持像您尝试做的那样传递
srcSet
。您可以使用JavaScript处理此问题,例如使用自定义加载器函数或将图像URL存储在状态变量中。