在 NextJS 中使用 Link 更改页面时未加载的图像

Question

如果不上传我的完整项目，这很难解释，但这里是。我想我已经将它缩小到 getInitialProps() 和 getStaticProps() 的某种组合。当我使用 next/link 更改页面时，未加载图像。如果我直接浏览到页面图像将加载正常。项目相当简单，只有 2 页，index.js 和 [slug].js。两者都是：

index.js

import React from 'react';
import Layout from '../components/layout';
import Seo from '../components/seo';
import Hero from '../components/hero';
import Forcast from '../components/forcast';
import { fetchAPI } from '../lib/api';
import ReactMarkdown from 'react-markdown';

const Home = ({ pages, homepage }) => {
  return (
    <Layout pages={pages}>
      <Seo seo={homepage.seo} />
      <Hero hero={homepage.hero} />
      <Forcast />
      <main className='main-content'>
        <div className='fullwidth-block'>
          <div className='container'>
            <div className='post single'>
              <div className='entry-content'>
                <ReactMarkdown 
                  source={homepage.Content} 
                  escapeHtml={false} 
                  transformImageUri={uri => 
                    uri.startsWith('http') ? uri : `${process.env.REACT_APP_IMAGE_BASE_URL}/${uri}`
                  }
                />
              </div>
            </div>
          </div>
        </div>
      </main>
    </Layout>
  );
};

export async function getStaticProps() {
  // Run API calls in parallel
  const [pages, homepage] = await Promise.all([
    fetchAPI('/pages'),
    fetchAPI('/homepage'),
  ]);

  return {
    props: { pages, homepage },
    revalidate: 1,
  };
}

export default Home;

[鼻涕虫].js

import ReactMarkdown from 'react-markdown';
import Layout from '../components/layout';
import Seo from '../components/seo';
import { fetchAPI } from '../lib/api';

const Page = ({ page, pages }) => {
  const seo = {
    metaTitle: page.Title,
    metaDescription: page.seo.metaDescription,
    shareImage: page.seo.shareImage,
  }

  return (
    <Layout pages={pages}>
      <Seo seo={page.seo} />
      <main className='main-content'>
        <div className='container'>
          <div className='breadcrumb'>
          </div>
        </div>
        <div className='fullwidth-block'>
          <div className='container'>
            <div className='row'>
              <div className='content col-md-8'>
                <div className='post single'>
                  <h2 className='entry-title'>{page.Title}</h2>
                  <ReactMarkdown 
                    source={page.Content} 
                    escapeHtml={false} 
                    transformImageUri={uri => 
                      uri.startsWith('http') ? uri : `${process.env.REACT_APP_IMAGE_BASE_URL}${uri}`
                    }
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </Layout>
  );
};

export async function getStaticPaths() {
  const pages = await fetchAPI('/pages');
  return {
    paths: pages.map((page) => ({
      params: {
        slug: page.slug,
      },
    })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const pages = await fetchAPI(
    `/pages?slug=${params.slug}`
  );
  return {
    props: { page: pages[0], pages },
    revalidate: 1,
  };
}

export default Page;

这也可能是 Strapi 的问题，但我不确定。

Answer 1

出现这个问题是因为 REACT_APP_IMAGE_BASE_URL 没有暴露给浏览器，只能在服务器上使用。

要将其显示给浏览器，您需要向其添加 NEXT_PUBLIC_ prefix。

# .env.development

NEXT_PUBLIC_REACT_APP_IMAGE_BASE_URL=http://localhost:1337

然后在您的代码中使用 process.env.NEXT_PUBLIC_REACT_APP_IMAGE_BASE_URL 引用它。

在 NextJS 中使用 Link 更改页面时未加载的图像

Images not loading on page change using Link in NextJS

environment-variables

strapi

next.js