Gatsby Wordpress 源插件中的内联图像答案

【问题标题】：Inline Images in Gatsby Wordpress source pluginGatsby Wordpress 源插件中的内联图像
【发布时间】：2020-12-11 21:45:28
【问题描述】：

我正在按照所有说明使用此插件https://www.gatsbyjs.com/plugins/@draftbox-co/gatsby-wordpress-inline-images/，但不起作用。

有谁知道可能出了什么问题？

gatsby-config.js：

{
      resolve: 'gatsby-source-wordpress',
      options: {
        excludedRoutes: [
          '/wp/v2/users/**',
          '/wp/v2/settings*',
          '/wp/v2/themes*'
        ],
        baseUrl: 'domain',
        protocol: 'http',
        postTypes: ["post", "page"],
        plugins: [
          {
            resolve: `@draftbox-co/gatsby-wordpress-inline-images`,
            options: {
              baseUrl: `domain`,
              protocol: `http`
            }
          }
        ],
        hostingWPCOM: false,
        useACF: true,

        searchAndReplaceContentUrls: {
          sourceUrl: 'http://domain',
          replacementUrl: ''
        }

        
      }
    },

【问题讨论】：

您在定义承载吗？ “不起作用”是什么意思？
嗨，费兰！在我的 Gatsby 博客中是这样的：imgur.com/gallery/BILwnkJ
插件是否正确下载了静态文件夹中的资源？
这是问题所在，资产没有发送到 Gatsby 中的静态文件夹。保持相同的 wordpress 路径。我的意思是帖子中的图像，除此之外一切正常
我已将您添加为我在 github 上的项目的合作者。你能帮帮我吗？

标签： gatsby gatsby-image

【解决方案1】：

Gatsby 在更新图片和 href 时有时会出错。

尝试清除缓存。

gatsby clean

之前

gatsby develop

【讨论】：

嗨，生锈！仍然是相同的根路径：
src 应该指向 gatsbys 本地图像文件夹。查询图像 url 并将其导入到您的模块中。 src 应该指向您的本地静态文件夹 abd 而不是原始源
插件应该做什么
阅读：gatsbyjs.com/plugins/gatsby-wpgraphql-inline-images
我使用的是 gatsby-source-wordpressV3，这个插件不能用它。

【解决方案2】：

我可以通过 http 和 https 访问 wordpress 网站。我只是将协议 url（gatsby 插件配置）更改为 https 并且可以工作

      resolve: 'gatsby-source-wordpress',
      options: {
        excludedRoutes: [
          '/wp/v2/users/**',
          '/wp/v2/settings*',
          '/wp/v2/themes*'
        ],
        baseUrl: 'domain.net',
        protocol: 'https',
        postTypes: ["post", "page"],
        
        plugins: [
          {
            resolve: '@draftbox-co/gatsby-wordpress-inline-images',
            options: {
              baseUrl: 'domain.net',
              protocol: 'https',
              withWebp: true,
            }
          }
        ],
        hostingWPCOM: false,
        useACF: true,

        searchAndReplaceContentUrls: {
          sourceUrl: 'https://domain',
          replacementUrl: ''
        }

        
      }

【讨论】：

【解决方案3】：

您看不到内嵌图片的原因是您的配置：

 searchAndReplaceContentUrls: {
   sourceUrl: 'http://domain',
   replacementUrl: ''
}

如果您删除它，您将看到带有正确 Wordpress src url 的内联图像。缺点是您的链接（如果您使用的是gatsby-link）不会被预取，因为它们的 url 中有 Wordpress sourceUrl。

【讨论】：