预渲染 nextjs getStaticProps() 给出错误：图像缺少下一个/图像所需的“src”

Question

From reading the nextjs documentation the getStaticProps should pre-render data that I want before a user comes to my site.通过阅读 nextjs 文档，getStaticProps 应该在用户访问我的网站之前预呈现我想要的数据。 I am trying to get images before I load them onto cards.我试图在将图像加载到卡片上之前获取图像。

Here in my index.js在我的index.js中

 export async function getStaticProps() {
    const images = getImages();
    return {
        props: {
            data: await Promise.all(images), // wait for all images to load
        }, revalidate: 5
    };
}

The getImages function looks like this getImages function 看起来像这样

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;
}

So then in the index.js I pass that data into a component which passes it into another component to the next/image.然后在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 looks like this: 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>
    );
}

Finally the Card.js file looks like this:最后， 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>
    );
}

After I refresh the page a couple of times or when I go to a differnt page on the site and come back to the home page it will give me the error:在我刷新页面几次后，或者当我 go 到网站上的不同页面并返回主页时，它会给我错误：

Unhandled Runtime Error Error: Image is missing required "src" property.未处理的运行时错误错误：图像缺少必需的“src”属性。 Make sure you pass "src" in props to the next/image component.确保将道具中的“src”传递给next/image组件。 Received: {"width":300,"height":300}收到：{“宽度”：300，“高度”：300}

I was trying to show a loading div if the data was null and thought I could try the revalidate attribute the getStaticProps() method has but it too was giving me the same error.如果数据是 null，我试图显示一个加载 div，我想我可以尝试 getStaticProps() 方法具有的 revalidate 属性，但它也给了我同样的错误。

So, I am not sure I understand this because I thought that the getStaticProps would always get the images before the page loads.所以，我不确定我是否理解这一点，因为我认为 getStaticProps 总是会在页面加载之前获取图像。 I see in the docs that it says it runs under next build.我在文档中看到它说它在下一个版本下运行。 So is it just once and done?那么它只是一次就完成了吗？ Am I missing a fundamental concept of pre-rendering?我是否缺少预渲染的基本概念？ please give me your advice.请给我你的建议。

Answer 1

I think these this correction shoukd be done in getImages :我认为这些更正应该在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;
}

Also, when trying to test getRandomInts one of the results was 40 which will be undefined , so maybe you should change it to the below:此外，当尝试测试getRandomInts时，其中一个结果是40 ，这将是undefined ，所以也许您应该将其更改为以下内容：

// remove + 1
// It's also recommended to use `let` instead of `var`
let candidateInt = Math.floor(Math.random() * max);

预渲染 nextjs getStaticProps() 给出错误：图像缺少下一个/图像所需的“src”

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-03-25 18:35:23

预渲染 nextjs getStaticProps() 给出错误：图像缺少下一个/图像所需的“src”

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-03-25 18:35:23

解决方案1
2 已采纳 2022-03-25 18:35:23