Как люди используют gatsby-image в реальном мире? - PullRequest
Новая
       40

Как люди используют gatsby-image в реальном мире?

1 голос
/ 01 мая 2020

Я следовал этому уроку https://www.gatsbyjs.org/packages/gatsby-image/#art -directing-множественные изображения , но нормальные люди не могли бы написать 50 строк кода для добавления изображения: 

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => {
  // Set up the array of image data and `media` keys.
  // You can have as many entries as you'd like.
  const sources = [
    data.mobileImage.childImageSharp.fluid,
    {
      ...data.desktopImage.childImageSharp.fluid,
      media: `(min-width: 768px)`,
    },
  ]

  return (
    <div>
      <h1>Hello art-directed gatsby-image</h1>
      <Img fluid={sources} />
    </div>
  )
}

export const query = graphql`
  query {
    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    desktopImage: file(
      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 2000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

Мой вопрос: как вы можете сохранить свое здравомыслие и использовать изображения с Гэтсби?

В этом примере много проблем:

  • Импорт и использование находятся далеко, в идеале должно быть близко (поэтому, если вы удаляете из html, вам нужно не забыть удалить из graphql )
  • Количество шаблонов огромно. Представьте, что вам нужно 2 изображения ...
  • Нет автоматического завершения при импорте изображений. Разработчики действительно вводят полный путь к изображениям? Это кажется большой работой. Переименование тоже выглядит рискованно. (Я использую intellij.)

1 Ответ

1 голос
/ 02 мая 2020

Я использую общий c Image компонент: 

import React from "react"
import Img from "gatsby-image"
import { useStaticQuery, graphql } from "gatsby"

export default (props) => {

  const { filename, type = 'default', alt, sizes = '(max-width: 400px) 100px, (max-width: 800px) 200px, 400px' } = props;

  const images = useStaticQuery(graphql`
    query ImageQuery {
      data: allFile {
        edges {
          node {
            relativePath
            default: childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
            square: childImageSharp {
              fluid(maxWidth: 600, maxHeight: 600) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  const image = images.data.edges.find(n => {
    return n.node.relativePath.includes(filename);
  });

  if (!image) {
    return null;
  }

  return (
    <Img alt={alt} fluid={{
      ...image.node[type].fluid,
      sizes: sizes,
    }} />
  )
}

Затем я передаю имя файла и альтернативный текст (и, необязательно, тип и размеры). 

 <Image alt="Gravity does not apply to cats" type="square" filename="cat-defies-gravity.png" />

I согласитесь, это обходной путь, пока мы не получим что-то вроде Querying 2.0 . Если вы прочитаете эту страницу, то увидите в качестве примера именно вашу проблему.

...