Question

我正在使用Gatsby + Wordpress组合构建投资组合站点。如果我在本地或Github页面上运行此设置，则在使用台式机/笔记本电脑时一切似乎都正常。如果我访问发布到Github页面的网站并使用移动设备查看图像，则根本无法显示。

我找到了this solution，并将其添加到我的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 }) => {
...

我没有找到其他解决方案，看来我自己也解决不了。

Link to site

Link to repo

希望我提供了足够的信息，如果您不提出任何疑问，我可以告诉您更多信息。预先感谢！

Answer 1

This line in your gatsby config可能是问题所在：baseUrl: "localhost:8888/robertsalmi.fi",

我怀疑wordpress插件使用它为所有图像添加前缀，因为您的实时网站正在使用基本网址显示所有图像。您需要提供正确的基础，以便可以正确建立图像链接。

Answer 2

我通过更改查询图像的方式来完成这项工作。首先，我使用了以下示例：

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

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

我将查询方法更改为此：

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

此gatsby-image查询必须手动完成，因为gatsby-config.js不支持以下片段：

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

盖茨比网站的图片未在移动设备上显示

2 个答案: