预呈现nextjs getStaticProps()，给出一个错误:在next/image中缺少所需的"src“
提问于 2022-03-24 19:45:12
通过阅读nextjs文档，getStaticProps应该在用户访问我的站点之前预先呈现我想要的数据。在我把它们加载到卡片上之前，我正在尝试获取图像。
在我的index.js里
export async function getStaticProps() {
const images = getImages();
return {
props: {
data: await Promise.all(images), // wait for all images to load
}, revalidate: 5
};
}getImages函数如下所示
export function getImages() {
const frameCount = 39;
const data = [];
for (let id = 0; id <= frameCount; id++) {
// add new promise to array
data.push(
fetch(`http://localhost:3000/GeneratedImgs/${id}.png`).then(
(res) => res.url
)
);
}
return data;
}因此，在index.js中，我将数据传递到一个组件中，该组件将数据传递给另一个组件到下一个/映像。
export default function Home({ data }) {
let testCardGrid = <div className="loading"></div>;
if (data !== null) {
mouseCardGrid = <CardGrid data={data} />;
}
return (
<>
<Head>
<title>Mouse</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
{testCardGrid}
<Map />
</>
);
}CardGrid.js如下所示：
export default function CardGrid({ data }) {
let cardArray = [];
let randomNumbers = [];
function getRandomInts(quantity, max) {
const arr = [];
while (arr.length < quantity) {
var candidateInt = Math.floor(Math.random() * max) + 1;
if (arr.indexOf(candidateInt) === -1) arr.push(candidateInt);
}
return arr;
}
randomNumbers = getRandomInts(8, 40);
randomNumbers.forEach((num) => {
cardArray.push({
title: `Card#${num}`,
imageUrl: data[num]
});
});
useEffect(() => {
console.log("cardgrid triggered");
}, []);
return (
<section id="content" className="section-padding">
<div className="container-fluid">
<div className="row">
{cardArray.map((object) => (
<Card title={object.title} imageUrl={object.imageUrl} />
))}
</div>
</div>
</section>
);
}最后，Card.js文件如下所示：
export default function Card({ title, imageUrl }) {
useEffect(() => {
console.log("card added");
}, []);
return (
<div className="col-lg-3 col-sm-6">
<div className="card text-center">
<Image
priority
className="card-img-top"
src={imageUrl}
height={300}
width={300}
/>
<div className="card-body">
<h2 className="card-text">{title}</h2>
</div>
</div>
</div>
);
}在刷新页面几次之后，或者当我转到站点上的不同页面并返回到主页时，它会给出错误：
未处理的运行时错误错误:图像缺少所需的"src“属性。确保将道具中的"src“传递给next/image组件。接收：{“宽度”：300，“高度”：300}
如果数据为null，我试图显示一个加载div，并认为我可以尝试getStaticProps()方法所具有的重新验证属性，但它也给了我同样的错误。
所以，我不确定我是否理解这一点，因为我认为getStaticProps总是在页面加载之前得到图像。我在文档中看到它是在下一个版本下运行的。就一次就完成了吗？我是不是缺少了预渲染的基本概念？请给我你的建议。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-25 10:35:23
我认为这些修正应该在getImages中完成
export function getImages() {
const frameCount = 39;
const data = [];
for (let id = 0; id <= frameCount; id++) {
// change this to
data.push(`http://localhost:3000/GeneratedImgs/${id}.png`);
}
return data;
}此外，在尝试测试getRandomInts时，结果之一是40，它将是undefined，因此您可能应该将其更改为以下内容：
// remove + 1
// It's also recommended to use `let` instead of `var`
let candidateInt = Math.floor(Math.random() * max);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71611950
复制相关文章
腾讯云开发者
