Gatsby-Image: разные картинки для мобильных / настольных ПК? - PullRequest
Новая
       72

Gatsby-Image: разные картинки для мобильных / настольных ПК?

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

Я хочу сделать мой gatsby-image условно: я хочу иметь разные изображения для мобильных устройств и компьютеров. Поэтому мне нужно поменять их местами.

Сейчас я делаю это: 

<Desktop>
  {heroImage && (
      <MyGatsbyImage
        img={heroImage}
      />
  )}
</Desktop>
<Mobile>
  {heroImageXS && (
      <MyGatsbyImage
        img={heroImageXS}
      />
  )}
</Mobile>

, где <Desktop> & <Mobile> - стилизованные компоненты с медиа-запросами, которые имеют display: block / display:none в зависимости от области просмотра.

Однако: это самое эффективное решение здесь? Мое решение всегда загружает оба изображения в фоновом режиме?

Без gatsby-image я бы сделал так: 

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

... но это означало бы не использовать gatsby-image здесь - который я хочу использовать.

1 Ответ

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

То, на что вы ссылаетесь, называется художественное направление . Использование метода в вашем вопросе, вероятно, приведет к тому, что браузер загрузит оба изображения.

gatsby-image имеет поддержку художественного руководства и даст отличный пример того, как его применить в документации : 

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
        }
      }
    }
  }
`
...