Мне нужно добавить изображение gatsby на мой сайт. Нужно какое-то направление - PullRequest
Новая
       18

Мне нужно добавить изображение gatsby на мой сайт. Нужно какое-то направление

0 голосов
/ 30 марта 2020

Я пытаюсь добавить gatsby-изображение с помощью GraphQL. Мне не нужно переписывать весь стартер, я просто хочу оптимизировать изображение для загрузки. Все запросы данных были сделаны с loda sh, поэтому я запутался. Я знаю, что упускаю что-то простое после документации .

Я тестирую с заголовком, чтобы посмотреть, получаю ли я доступ к данным.
Нужно ли добавлять этот запрос в gatsby-node? 

import React from 'react';
import _ from 'lodash';
import { useStaticQuery, graphql } from "gatsby"

import { Layout } from '../components/index';
import { htmlToReact, safePrefix } from '../utils';

export default class Post extends React.Component {
  render() {

    const data = useStaticQuery(graphql`
    query postInfo {
  allMarkdownRemark {
    edges {
      node {
        id
        frontmatter {
          content_img_path
          excerpt
          img_path
          subtitle
          title
        }
      }
    }
  }
}
  `)

    return (
      <Layout {...this.props}>
        <article className="post post-full">
          <header className="post-header">
            <div className="post-meta">
            </div>
            <h1 className="post-title">{_.get(this.props, 'pageContext.frontmatter.title')}</h1>
          </header>
          {_.get(this.props, 'pageContext.frontmatter.subtitle') &&
            <div className="post-subtitle">
              {htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle'))}
            </div>
          }


          <h3>{data.allMarkdownRemark.title}</h3>


          {_.get(this.props, 'pageContext.frontmatter.content_img_path') &&
            <div className="post-thumbnail">
              <img className="thumbnail" src={safePrefix(_.get(this.props, 'pageContext.frontmatter.content_img_path'))} alt={_.get(this.props, 'pageContext.frontmatter.title')} />
            </div>
          }
          <div className="post-content">
            {htmlToReact(_.get(this.props, 'pageContext.html'))}
          </div>
        </article>   
      </Layout>
    );
  }
}

1 Ответ

1 голос
/ 31 марта 2020

allMarkdownRemark означает, что вы запрашиваете уценку , а не изображения . Но вы говорите, что просто тестируете. Если ваш тест на уценку прошел успешно, вы можете быть уверены, что часть GraphQL работает.

Вот важный код из документов, которые вы связали: 

import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/default.jpg" }) {
        childImageSharp { // gatsby-image generates this GraphQL node for you
          fluid { // gatsby-image supplies this GraphQL fragment for you
            ...GatsbyImageSharpFluid // gatsby-image supplies this GraphQL fragment for you
          }
        }
      }
    }
  `)
  return (
    <div>
      <h1>Hello gatsby-image</h1>
      <Img
        fluid={data.file.childImageSharp.fluid} // the data supplied by the gatsby-image query
        alt="Gatsby Docs are awesome"
      />
    </div>
  )
}

Do I need to add this query to gatsby-node? Нет, вы этого не сделаете. gatsby-node.js предназначен для программного генерирования страниц. Вы можете использовать gatsby-image независимо от любого кода gatsby-node.js.

РЕДАКТИРОВАТЬ

Вы должны указать gatsby-image, где искать изображения, настроив источник данных. Самый простой способ - gatsby-plugin-filesystem в gatsby-config.js: 

{
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/images`,
        name: "images",
      },
},

Ваш запрос graphQL 

{
  allFile(
    filter: {
      sourceInstanceName: {eq: "images"} // tell graphQL where to find your images
    },
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
...