gatsby-source-medium 缩略图未显示

问题描述

我在我的 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

这里是Image组件的代码

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 的第一个项目。有没有我遗漏的地方或者我做错了什么？

提前致谢

解决方法

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

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 组件不能仅使用 gatsby-image 来呈现 imageId。 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 插件，所以恐怕您将无法使用 {{1 }} 成分。您必须使用标准的 Img 标签。