gatsby-source-medium 缩略图图像未显示

Question

我在我的 react 项目中使用了 gatsby，来展示我的媒体，项目中的文章。

下面是我的 graphql 查询。

const BlogPost = () => {
  const blogMediumQueryData = useStaticQuery(graphql`
    query Medium {
      allMediumPost(sort: { fields: [createdAt], order: DESC }) {
        edges {
          node {
            id
            title
            uniqueSlug
            createdAt(formatString: "MMM YYYY")
            virtuals {
              previewImage {
                imageId
              }
            }
            author {
              name
            }
          }
        }
      }
    }
  `)

  const blogs = blogMediumQueryData.allMediumPost.edges
return (
    <Blog
        image={blog.node.virtuals.previewImage.imageId}
        title={blog.node.title}
        date={blog.node.createdAt}
        author={blog.node.author.name}
        path={blog.node.uniqueSlug}
     />
  )

这给了我预览图像 ID。我将它作为道具传递给子组件。但是当我尝试使用 gatsby 中的 Img 组件显示图像时，图像没有显示。

这是我的子组件代码

import React from "react"
import { Link } from "gatsby"
import { slugify } from "../utils/utilityFunctions"
import Image from "../elements/image"

const Blog = ({ image }) => {
  return (
    <div className="content-block">
      <div className="post-thubnail">
        {image && (
          <Link to={postUrl} target='blank'>
            <Image src={image} alt={title} />
          </Link>
        )}
      </div>
  )
}
export default Blog

这是图像组件的代码

import React from "react";
import Img from "gatsby-image";

const NonStretchedImage = props => {
    let normalizedProps = props
    normalizedProps = {...normalizedProps.fluid, aspectRatio: 1}
    let alignment;
    if(props.align === 'right'){
        alignment = '0 0 0 auto'
    } else if(props.align === 'left'){
        alignment = '0 auto 0 0'
    }else{
        alignment = '0 auto'
    }

    if (props.fluid && props.fluid.presentationWidth) {
        normalizedProps = {
            ...props,
            style: {
                ...(props.style || {}),
                maxWidth: props.fluid.presentationWidth,
                margin: alignment, 
            },
        }
    }

    return <Img {...normalizedProps} />
}

export default NonStretchedImage;

这是我第一个使用 gatsby 和 graphql 的项目。有什么我遗漏的或者我做错了什么吗？

提前致谢

Answer 1

我猜一些注意事项会让您走上解决问题的道路。

node，在GraphQL查询中是一个数组，同理，我猜virtuals就是。在 localhost:8000/___graphql 游乐场检查并测试响应。

假设您的查询按预期工作，您的代码应如下所示：

const BlogPost = () => {
  const blogMediumQueryData = useStaticQuery(graphql`
    query Medium {
      allMediumPost(sort: { fields: [createdAt], order: DESC }) {
        edges {
          node {
            id
            title
            uniqueSlug
            createdAt(formatString: "MMM YYYY")
            virtuals {
              previewImage {
                imageId
              }
            }
            author {
              name
            }
          }
        }
      }
    }
  `)

  const blogs = blogMediumQueryData.allMediumPost.edges
return (
    <Blog
        image={blog.node[0].virtuals.previewImage.imageId}
        title={blog.node[0].title}
        date={blog.node[0].createdAt}
        author={blog.node[0].author.name}
        path={blog.node[0].uniqueSlug}
     />
  )

或者，您可以遍历节点数组并使用之前的 Blog 组件，因为它将获取每个可迭代变量。

我认为您的Image 组件不能仅使用imageId 来呈现gatsby-image。 Gatsby 需要一堆数据（由它的转换器和锐器提供）来渲染图像，而不是使用标识符，而是使用一系列字段（这就是它通常渲染查询片段的原因，... 指出）。最后，您的图像组件应该呈现如下内容：

<img src={`https://medium.com/${blog.node[0].virtuals.previewImage.imageId}`}

基于：https://blog.devgenius.io/how-to-scrap-your-medium-articles-with-gatsby-js-f35535ebc09d

总之，gatsby-source-medium 本身并不能提供足够的数据来使用gatsby-image 或gatsby-image-plugin 插件，所以恐怕你将无法使用Img 组件。您必须使用标准的img 标签。