-1

我正在使用降价页面在 Gastby 上生成我的页面。我在 .md 文件中定义图像路径。

---
slug: "/blog/my-blog-post"
date: "2022-01-11"
title: "My title"
image: /images/blog/my-image-1.png
---
![image-alt](/images/blog/my-image-1.png)
# My content header

My content

{MarkdownRemark.frontmatter__slug}.js

import React from "react"
import { Helmet } from "react-helmet"
import BaseController from "../base-controller"
import { graphql } from "gatsby"
import { getSrc } from "gatsby-plugin-image"
const baseUrl = 'https://pppx.com';
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);
  return (
    <BaseController>
      <Helmet>
        <title>{frontmatter.title}</title>
        <meta name="title" content={frontmatter.title} />
        <!-- this line doesn'g work as expected --!>
        <meta property="og:image" content={frontmatter.image} />
      </Helmet>
      <section>
        <div class="container">
          <div class="row justify-content-center">
              <div class="col-md-12 col-lg-12" dangerouslySetInnerHTML={{ __html: html }}>
              </div>
          </div>
        </div>
      </section>
    </BaseController>
  )
}

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image
      }
    }
  }
  `

在这里，我需要 og:image 作为由 gastby 生成的 url。但我不能那样做。顺便一提，

  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);

返回未定义。所以 getSrc 对我没有帮助。

有没有办法让 og:image 工作？

4

1 回答 1

1

您getSrc正在返回undefined，因为您的 GraphQL 查询没有返回所有应该返回的数据。

也就是说，getSrc它是一个帮助函数，可以帮助您编写更简洁的代码，而且它根本不是强制性的。使用文档作为后备：

src以字符串形式获取默认图像。这将是后备，所以通常是jpgor png。接受与 相同的类型getImage。

如果你看一下getImage例子：

const image = getImage(data.avatar)
// This is the same as:
const image = data?.avatar?.childImageSharp?.gatsbyImageData

这里的问题是您查询结束时image没有查询childImageSharpnor gatsbyImageData。您的查询应如下所示：

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image {
         childImageSharp {
            gatsbyImageData(
              width: 200
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    }
  }
  `

允许您在image没有警告或破坏代码的情况下进行查询的事实，因为它应该打扰内部节点，这让我认为您的文件系统可能没有正确设置，因此 Gatsby 无法为图像创建数据节点. 因此，在此之前，您应该在 GraphiQL 游乐场 ( localhost:8000/___graphql) 中测试您的查询，以检查您是否正在查询强制性数据节点，否则，您getSrc将永远无法工作，因为它不包含所需的数据。使用类似的东西：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `blogImaghes`,
    path: `${__dirname}/src/images/blog/`,
  },
},
于 2022-01-23T16:46:22.837 回答