【问题标题】:Gatsby JS: Remark splash image referencing either a relative or remote imageGatsby JS:备注启动图像引用相对或远程图像
【发布时间】:2020-03-08 22:41:27
【问题描述】:

我有两个 markdown 文件,一个为其启动图像引用相对图像,另一个引用外部图像。

---
cover: relative.jpeg
---
Content Foo

---
cover: https://external.com/external_image.jpg
---
Content Zap

我想像这样用 GraphQL 引用这两个图像

query {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          cover {
            childImageSharp {
              fluid{
                # I'll be using a fragment here instead, but this is a minimal example
                src
              }
            }
          }
        }
      }
    }
  }
}

有没有办法让gatsby-image 处理外部图像?或者,是否有一个 gatsby 插件可以做到这一点?

提前致谢!

【问题讨论】:

    标签: gatsby gatsby-image


    【解决方案1】:

    这是可行的,但需要使用 onCreateNode API 处理转换后的 Markdown 节点并使用 gatsby-source-filesystem 的 createRemoteFileNode() 下载远程图像,然后使用 createSchemaCustomization API 应用必要的架构修改,如自定义扩展或解析器如果您想使用相同的 graphql 字段访问远程/本地文件。

    另外,我怀疑https://www.gatsbyjs.org/packages/gatsby-plugin-remote-images/ 完全按照我上面的描述进行,但您仍然有两个独立的远程/本地数据字段。

    【讨论】:

      猜你喜欢
      • 2019-03-07
      • 2021-03-27
      • 2019-09-10
      • 2014-01-22
      • 1970-01-01
      • 1970-01-01
      • 2022-12-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多