异步下载静态图片，NextJS + TypeScript

import React from 'react';

interface Props {
  imageUrl: string;
}

const ImageComponent: React.FC<Props> = ({ imageUrl }) => {
  return <img src={imageUrl} alt="静态图片" />;
};

export default ImageComponent;

import React from 'react';
import ImageComponent from './ImageComponent';

interface Props {
  imageUrl: string;
}

const Page: React.FC<Props> = ({ imageUrl }) => {
  return (
    <div>
      <h1>异步下载静态图片</h1>
      <ImageComponent imageUrl={imageUrl} />
    </div>
  );
};

export async function getStaticProps() {
  const imageUrl = '静态图片的URL';

  return {
    props: {
      imageUrl,
    },
  };
}

export default Page;

import React from 'react';
import { GetStaticPaths, GetStaticProps } from 'next';
import Page from '../components/Page';

interface Props {
  imageUrl: string;
}

const HomePage: React.FC<Props> = ({ imageUrl }) => {
  return <Page imageUrl={imageUrl} />;
};

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [], // 此处可以填写需要生成静态页面的路径，如果为空数组，则Next.js会在第一次访问时生成所有页面
    fallback: 'blocking', // 设置为'blocking'，意味着Next.js会等待数据加载完成后再呈现页面
  };
};

export const getStaticProps: GetStaticProps = async () => {
  const imageUrl = '静态图片的URL';

  return {
    props: {
      imageUrl,
    },
  };
};

export default HomePage;