Reactjs 盖茨比网站'；s图像不是'；t在移动设备上显示

我正在用盖茨比和Wordpress的组合建立投资组合网站。如果我在本地或Github页面上运行此设置，那么在使用台式机/笔记本电脑时，一切看起来都正常。若我访问发布到Github页面的站点，并使用移动设备查看，则根本不会显示图像

我找到并将其添加到我的

gatsby node.js

中，如下所示：

const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)


// This is the solution I found but it's not working in my case
// ----------
if (process.env.NODE_ENV === "development") {
  process.env.GATSBY_WEBPACK_PUBLICPATH = "/"
}
// ----------

exports.createPages = ({ graphql, actions }) => {
...

我没有找到任何其他的解决办法，似乎我自己也解决不了

希望我提供了足够的信息，这样你就可以抓住这个想法，如果你不问我，我会告诉你更多。提前谢谢

似乎是问题所在：

baseUrl：“localhost:8888/robertsalmi.fi”，

---

我怀疑wordpress插件使用它作为所有图像的前缀，因为您的live站点正在使用该基本url显示所有图像。您需要提供正确的基础，以便它能够正确地构建图像链接。

我通过更改查询图像的方式实现了这一点。首先，我使用以下示例：

query {
    wordpressWpPortfolio {
     acf {
      portfolio_gallery {
       source_url
       }...

这为图像生成了错误类型的URL。图像指向我的本地主机，而不是我的repo中的文件夹

我将查询方法更改为：

   query {
    wordpressWpPortfolio {
     acf {
      portfolio_gallery {
       localFile {
        childImageSharp {
         fluid(maxWidth: 500, quality: 100) {
          src
          srcSet
          aspectRatio
          sizes
          base64
         }...

由于gatsby-config.js不支持以下片段，因此必须手动查询gatsby图像：

fixed(width: 300, height: 300) {
   ...GatsbyImageSharpFixed
}

---

当我使用Chrome或Firefox访问您的站点时，即使在桌面上也不会显示任何图像。谢谢。我想如果我停止在本地运行Wordpress，图像将不再显示。我不知道为什么会这样，因为所有的图像文件都应该从投资组合回购中找到。我添加了回购协议的链接。你可以从我的问题中找到答案。是的，我想可能与此有关。如果我像这样查询图像：

allWordpressWpPortfolio{edges{node{portfolio\u gallery{source\u url}}}}

images获得了指向本地主机的url。如果我使用

childImageSharp

查询图像，则其指向URL/static/。。。我的repo中的文件夹包含图像，但现在我有一个问题，我在控制台中遇到了这个错误

加载资源失败：服务器响应状态为404（）

我发现使用

childImageSharp

查询的图像只需要将repo的名称添加到其URL中。例如，图像现在有如下URL：

https://imlastrebor.github.io/static/0fd96c360c6fcbeb3aafa01a9fb57851/0aa4b/maidot_rivissa_FB.jpg

URL应该是这样的

https://imlastrebor.github.io/portfolio/static/0fd96c360c6fcbeb3aafa01a9fb57851/0aa4b/maidot_rivissa_FB.jpg

。如何将我的回购协议名称（/portfolio）添加到图像的URL？我已经在

gatsby config.js