将远程映像与gatsby-image结合使用

Question

我在我的Gatsby网站上有一系列的促销活动，它们使用gatsby-source-mysql从数据库中提取数据。在此数据中，我有一个名为ad_filename的图像节点，例如，它返回ad_image_1.jpg。我已经将完整的资源URL设置为环境变量，但由于我只在graphql查询中获得文件名，所以我无法使用remoteImageFieldNames中内置的插件并使图像与gatsby-image.一起工作。我想这样就可以控制尺寸/优化等。有没有办法将相对的，远程路径转换为可用的节点？

这是我对gatsby-source-mysql的配置

{
      resolve: `gatsby-source-mysql`,
      options: {
        connectionDetails: {
          host: process.env.GATSBY_DATABASE_HOST,
          user: process.env.GATSBY_DATABASE_USER,
          database: process.env.GATSBY_DATABASE_NAME,
          password: process.env.GATSBY_DATABASE_PASSWORD,
        },
        queries: [
          {
            statement: 'SELECT * FROM crm_dealers where state != ""',
            idFieldName: 'subdomain',
            name: 'Dealers',
          },
          {
            statement:
              'SELECT lm.*, d.subdomain domain FROM crm_lp_mgmt lm INNER JOIN crm_dealers d ON d.id = lm.dealer_id WHERE lm.ad_title != ""',
            idFieldName: 'id',
            name: 'Promos',
            parentName: 'Dealers',
            foreignKey: 'subdomain',
            cardinality: 'OneToMany',
          },
        ],
      },
    },

这是我对促销活动的查询：

query Promos($subdomain: StringQueryOperatorInput = {}){
  allMysqlPromos(filter: { subdomain: $subdomain }) {
    edges {
      node {
        ad_filename
        ad_title
        ad_body
        URL_ext
        subdomain
      }
    }
  }
}

这就是查询返回的内容：

{
  "data": {
    "allMysqlPromos": {
      "edges": [
        {
          "node": {
            "ad_filename": "ad_002910.jpg",
            "ad_title": "Buy One, Get One Free",
            "ad_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis quam venenatis porta sed. Aliquet eget lobortis quam ut dignissim eget quam lobortis. Elementum, at nullam tincidunt viverra pulvinar ac porta sed mauris. Sit leo imperdiet turpis morbi arcu, posuere odio sit.",
            "URL_ext": "/promo-jesse",
            "subdomain": "sacramento"
          }
        },
        {
          "node": {
            "ad_filename": "ad_002911.jpg",
            "ad_title": "Buy Two, Get Four Free",
            "ad_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis quam venenatis porta sed. Aliquet eget lobortis quam ut dignissim eget quam lobortis. Elementum, at nullam tincidunt viverra pulvinar ac porta sed mauris. Sit leo imperdiet turpis morbi arcu, posuere odio sit.",
            "URL_ext": "promo-jesse-two",
            "subdomain": "sacramento"
          }
        }
      ]
    }
  }
}

因此，为了再次澄清，我确保将ad_filename的结果转换为可以通过childImageSharp运行的节点，以便进行优化等。我该如何做到这一点？

提前谢谢。

Answer 1

环境变量应该像您所做的那样存储敏感数据，例如host、user、database或password。在文件中存储图像URL是该文件主要目的，此外，具有用于存储该信息的MySQL数据库。

我强烈建议将这种数据存储在您的数据库中。

According to the documentation，您可以通过将URL作为参数从远程镜像中使用gatsby-image：

如果您的查询存储了图像的远程url，并且您希望使用Gatsby的图像处理，请为query对象提供remoteImageFieldNames。

确保您已经安装了gatsby-plugin-sharp和gatsby-transform-sharp包，并将它们添加到您的gatsby-config.js。例如，假设您有一个执行者表，其中的profile_url列存储远程图像url，例如'https://cdn.pixabay.com/photo/2014/07/10/11/15/balloons-388973_1280.jpg'。

在您的案例中：

{
      resolve: `gatsby-source-mysql`,
      options: {
        connectionDetails: {
          host: process.env.GATSBY_DATABASE_HOST,
          user: process.env.GATSBY_DATABASE_USER,
          database: process.env.GATSBY_DATABASE_NAME,
          password: process.env.GATSBY_DATABASE_PASSWORD,
        },
        queries: [
          {
            statement: 'SELECT * FROM crm_dealers where state != ""',
            idFieldName: 'subdomain',
            name: 'Dealers',
          },
          {
            statement:
              'SELECT lm.*, d.subdomain domain FROM crm_lp_mgmt lm INNER JOIN crm_dealers d ON d.id = lm.dealer_id WHERE lm.ad_title != ""',
            idFieldName: 'id',
            name: 'Promos',
            parentName: 'Dealers',
            foreignKey: 'subdomain',
            cardinality: 'OneToMany',
            remoteImageFieldNames: ['ad_filename']
          },
        ],
      },
    },  

注:请注意remoteImageFieldNames: ['ad_filename']__。

Gatsby字段是一个列，其中包含您希望下载并利用remoteImageFieldNames的图像处理功能的图像URL。

就是这样，Gatsby，使用转换器和锐化工具将为该图像创建一个可查询节点，您将能够在其中添加到gatsby-image.

如果您不能/不能使用内置方法。您仍然可以告诉Gatsby，您有一个要使用Gatsby's filesystem在本地解析的图像

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/your/path/to/images/`,
  },
},

注意:当然，您可以有多个gatsby-source-filesystem__实例。

Gatsby将查看该目录并解析其中的内容(本例中为图像)，为每个图像创建相应的节点。您只需要通过以下方式进行查询：

{
  allFile(filter: { sourceInstanceName: { eq: "images" } }) {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

sourceInstanceName代表gatsby-source-filesystem选项中的name。根据需要添加任意数量的滤镜以获得所需的图像。