Gatsby-plugin-image 与以编程方式创建的页面问题

Posted 2023-03-08

【中文标题】Gatsby-plugin-image 与以编程方式创建的页面问题

【英文标题】：Gatsby-plugin-image with programmatically created pages issue

【发布时间】：2021-06-09 20:47:59

【问题描述】：

我正在 gatsby 中从 MD 文件以编程方式创建页面。我遇到的问题是我正在使用 from gatsby-plugin-image 在页面加载时从所述 MD 文件的 frontmatter 中提取图像 img 未呈现并且我得到错误 gatsby-plugin-image] Missing图片道具

这是文件和graphql设置

import React from "react";
import  graphql  from "gatsby";
import Layout from "../components/Layout";
import Button, Card, CardBody, CardTitle  from "reactstrap";
import  GatsbyImage, getImage  from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ( data ) => 
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src=image
            alt=post.description
            placeholder="blurred"
            width=500
            layout="constraint"
          />
          <CardTitle>post.frontmatter.title</CardTitle>
          <CardBody>
            <div dangerouslySetInnerhtml= __html: post.html  />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
;

export const query = graphql`
  query($slug: String!) 
    markdownRemark(fields:  slug:  eq: $slug  ) 
      html
      frontmatter 
        title
        description
        image 
          childImageSharp 
            gatsbyImageData(
              width: 500
              placeholder: BLURRED
              formats: [AUTO]
            )
          
        
      
    
  
`;

export default ProductPage;

我尝试了一些不同的道具，例如改变

src=post.frontmatter.image 到 src=image，

变化

const image = getImage(post.image) 到 const image = getImage(post.frontmatter.image)

你可以看到标题工作正常，所以它必须是图像的问题。

当我在 graphiql 中使用相同的查询时，它确实会返回图像。

【问题讨论】：

在返回 JSX 之前再次 ....console.log(data);（post 或 image）？从检查数据/道具/参数开始很难吗？

为什么不data？为什么是衍生品？？？？？？ ...更新问题

所以 console.log(image) 返回 undefined 但 console.log(post) 返回 html: '

const image = getImage(post.frontmatter.image); console.log(image); ... 再加上再次阅读图像插件文档 ... 关于<GatsbyImage /> props/args ... 错误就是这样！！！

【参考方案1】：

您的图像属于frontmatter，所以根据您的试验，您从未尝试过：

import React from "react";
import  graphql  from "gatsby";
import Layout from "../components/Layout";
import Button, Card, CardBody, CardTitle  from "reactstrap";
import  GatsbyImage, getImage  from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ( data ) => 
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src=post.frontmatter.image.childImageSharp.gatsbyImageData
            alt=post.description
            placeholder="blurred"
            width=500
            layout="constraint"
          />
          <CardTitle>post.frontmatter.title</CardTitle>
          <CardBody>
            <div dangerouslySetInnerHTML= __html: post.html  />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
;

export const query = graphql`
  query($slug: String!) 
    markdownRemark(fields:  slug:  eq: $slug  ) 
      html
      frontmatter 
        title
        description
        image 
          childImageSharp 
            gatsbyImageData(
              width: 500
              placeholder: BLURRED
              formats: [AUTO]
            )
          
        
      
    
  
`;

export default ProductPage;

注意post.frontmatter.image.childImageSharp.gatsbyImageData中的嵌套

【讨论】：

非常感谢我实际上需要关闭它我意识到它的问题是我用“SRC”调用图像，它用于 和 我应该一直用“图像”来称呼它。

【参考方案2】：

import React from "react";
import  graphql  from "gatsby";
import Layout from "../components/Layout";
import Button, Card, CardBody, CardTitle  from "reactstrap";
import  GatsbyImage, getImage  from "gatsby-plugin-image";
import "../styles/main.scss";

const ProductPage = ( data ) => 
  const post = data.markdownRemark;
  const image = getImage(post.image)
  return (
    <Layout>
      <div>
        <Card>
          <GatsbyImage
            className="card-image-top"
            src=post.frontmatter.image.childImageSharp.gatsbyImageData <= should be using "IMAGE" not "SRC" SRC is used for <StaticImage> <GatsbyImage> should use "IMAGE" to call it.
            alt=post.description
            placeholder="blurred"
            width=500
            layout="constraint"
          />
          <CardTitle>post.frontmatter.title</CardTitle>
          <CardBody>
            <div dangerouslySetInnerHTML= __html: post.html  />
            <Button 
             className="btn btn-outline-secondary float-right" color="light">Buy</Button>
          </CardBody>
        </Card>
      </div>
    </Layout>
  );
;