Environment variables 使用NextJS中的链接更改页面时未加载图像

这是很难解释没有上传我的完整项目可能，但这里去。我想我已经把范围缩小到了getInitialProps（）和getStaticProps（）的组合。使用“下一步/链接”更改页面时，未加载图像。如果我直接浏览到页面，图像将加载良好。这个项目非常简单，只有两个页面，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;

从“React”导入React；
从“../components/Layout”导入布局；
从“../components/Seo”导入Seo；
从“../components/Hero”导入Hero；
从“../components/Forcast”导入预测；
从“../lib/api”导入{fetchAPI}；
从“react markdown”导入react markdown；
const Home=（{pages，homepage}）=>{
返回(
startsWith（'http'）？uri:`${process.env.REACT\u APP\u IMAGE\u BASE\u URL}/${uri}`
}
/>
);
};
导出异步函数getStaticProps（）{
//并行运行API调用
const[页面，主页]=等待承诺([
fetchAPI（“/pages”），
fetchAPI（“/主页”），
]);
返回{
道具：{页面，主页}，
重新验证日期：1，
};
}
导出默认主页；

[slug].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;

从“react markdown”导入react markdown；
从“../components/Layout”导入布局；
从“../components/Seo”导入Seo；
从“../lib/api”导入{fetchAPI}；
常量页=（{Page，pages}）=>{
常数seo={
metaTitle:page.Title，
元描述：page.seo.metaDescription，
shareImage:page.seo.shareImage，
}
返回(
{page.Title}
uri.startsWith（'http'）？uri:`${process.env.REACT\u APP\u IMAGE\u BASE\u URL}${uri}`
}
/>
);
};
导出异步函数getStaticPaths（）{
const pages=await fetchAPI（'/pages'）；
返回{
路径：pages.map（（页面）=>({
参数：{
slug:page.slug，
},
})),
后退：错误，
};
}
导出异步函数getStaticProps（{params}）{
const pages=等待获取API(
`/页面？slug=${params.slug}`
);
返回{
道具：{page:pages[0]，pages}，
重新验证日期：1，
};
}
导出默认页面；

---

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

发生此问题的原因是

REACT\u APP\u IMAGE\u BASE\u URL

未向浏览器公开，仅在服务器上可用

要将其公开给浏览器，您需要向其中添加

#.env.development
下一步\u公共\u反应\u应用程序\u图像\u基础\u URL=http://localhost:1337

---

然后在您的代码中使用

process.env.NEXT\u PUBLIC\u REACT\u APP\u IMAGE\u BASE\u URL引用它

当图像加载失败时，是否会出现错误（检查开发工具中的

网络

选项卡）？加载失败时，图像是否使用预期的URL？它可能与您传递给

ReactMarkdown

组件的

transformImageUri

函数有关。我收到一个404页面重新加载。它正在图像路径和本地主机之间添加/未定义/3000个URL，因此URL看起来像“…”未定义的

undefined

可能来自浏览器上不可用的

REACT\u APP\u image\u BASE\u URL

env var。您是如何设置环境变量的？它在.env.development文件中传递。它只有一个变量：

REACT\u APP\u IMAGE\u BASE\u URL=http://localhost:1337

如果需要下一个\u PUBLIC\uuu，我是否可以删除变量的REACT\u APP\uu前缀？我认为这是唯一的要求。是的，你可以删除

REACT\u APP\uu

前缀，这在Next.js中不是必需的。太好了！我会给它一个镜头在一点和更新的问题与批准的答案。谢谢