时间戳

首页 > 解决方案 > Gatsby-plugin-image 与以编程方式创建的页面问题

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

问题描述

我正在从 MD 文件以编程方式在 gatsby 中创建页面。我遇到的问题是当页面加载时，我正在使用 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 中使用相同的查询时，它也会返回图像。

标签： graphqlgatsbyprogrammatically-created

解决方案

您的图像属于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

推荐阅读