Многоразовый компонент Gatsby-Image с динамическими источниками изображений

Я тоже искал этот ответ. Надеюсь, это ответит на ваш вопрос:

Окончательный код:

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';

// Note: You can change "images" to whatever you'd like.

const Image = props => (
  <StaticQuery
    query = {graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render = {data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename);
      });
      if (!image) {
        return null;
      }

      //const imageSizes = image.node.childImageSharp.sizes; sizes = {imageSizes}
      return <Img alt = {props.alt} fluid = {image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

Использование изображения:

import Image from '../components/Image';
<div style = {{ maxWidth: `300px` }}>
    <Image alt = "Gatsby in Space" filename = "gatsby-astronaut.png" />
</div>

Объяснение

Поскольку StaticQuery не поддерживает интерполяцию строк в своем литерале шаблона, мы не можем передать ему какие-либо реквизиты. Вместо этого мы попытаемся обработать проверку реквизитов в части рендеринга StaticQuery.

Предостережения

Я не уверен на 100%, влияет ли это на время компиляции, поскольку мы сканируем все изображения. Если это так, пожалуйста, дайте мне знать!

Обновление: если у вас много изображений, размер пакета может стать довольно большим, так как это решение сканирует ВСЕ изображения.

Дальнейшая настройка

Вы можете настроить код так, чтобы отображалось изображение-заполнитель, если реквизиты не переданы.

Альтернативы

Тем не менее, есть другой способ справиться с этим, но с немного большей работой/кодом.

Источники

• Я изменил код из эта статья. (Обратите внимание, что в статье использовался устаревший код.)

К сожалению, из того, что я могу собрать, лучшим решением является запись отдельных файлов js для изображений.

В подходе @RodrigoLeon это приведет к ДРАМАТИЧЕСКОМУ увеличению размера пакета. Особенно, если, скажем, у вас более 50 изображений. Потому что каждый раз, когда вы используете это и перебираете все изображения, вы создаете ссылки на них в файле компонента. Так что я бы не рекомендовал делать это таким образом.

Сайт, который я создаю, представляет собой платформу электронной коммерции с тысячами изображений (для всех продуктов). Это создало серьезную проблему с использованием gatsby, который запрашивает изображения. Долгое время у меня был компонент, который запрашивал все изображения и сопоставлял их с соответствующим продуктом. (Как предложено в этом ) Это очень неэффективно, выдает предупреждения о продолжительности запроса.

Альтернативой этому является присоединение файла изображения к продукту на уровне данных, а не при попытке рендеринга.

src/gatsby-api/create-resolvers/index.js

const resolvers = {
    AWSAppSync_Product: {
        imageFile: {
            type: 'File',
            resolve: async (source, args, context, info) => {
                const node = await context.nodeModel.runQuery({
                    query: {
                        filter: {
                            Key: { eq: source.image1 }
                        }
                    },
                    type: 'S3Object',
                    firstOnly: true
                });

                if (node && node.imageFile) return node.imageFile;
            }
        },
    },
}

module.exports = {
    resolvers
}

gatsby-node.js

exports.createResolvers = async ({ createResolvers }) => {
    createResolvers(resolvers)
}

источник/компоненты/изображение/index.js

import React from 'react'
import Img from 'gatsby-image'

export const Image = props => {
  if (props.imageFile && props.imageFile.childImageSharp && props.imageFile.childImageSharp.fluid) {
    return <Img className = {props.imgClassName} alt = {props.alt} fluid = {props.imageFile.childImageSharp.fluid} />;
  }
};

Затем используйте его как:

<Image
  imageFile = {product.imageFile}
  alt = ""
/>

AWSAppSync_Product — это тип узла, к которому я прикрепляю свой файл. (который можно найти на игровой площадке graphql на локальном хосте). Разрешение будет соответствовать Key из S3Object с image1 (строкой) на продукте. Это позволяет мне напрямую использовать изображения продуктов без необходимости выполнять запрос внутри компонента изображения.

На мой взгляд, это ценная информация, как только вы обдумаете ее, и она, безусловно, мне очень помогла.

Если вы используете Wordpress с WP GraphQL и хотите динамически загружать некоторые сообщения, вы столкнетесь с той же проблемой. Вы не сможете использовать замечательные функции предварительной обработки, такие как снижение качества и использование грубых заполнителей base64. Как уже упоминалось, решение @RodrigoLeon будет работать, но вы столкнетесь с огромной нагрузкой, если ваш сайт в конечном итоге разрастется за счет изображений.

Поскольку на моем сайте будет много постов и будет динамическая загрузка таких постов, мне пришлось придумать решение, которое было бы, по крайней мере, приемлемым. В итоге я генерирую childImageSharp (и предоставляю общий заполнитель base64) для динамической части моего веб-сайта, поэтому я всегда могу передать childImageSharp компоненту <Img> Gatsby.

Вот пример гибкого типа изображения для избранных изображений в сообщениях:

• Обязательно включите это в свой GQL:

featuredImage {
  node {
    sourceUrl
    mediaDetails {
      file
      width
      height
      sizes {
        file
        name
        width
        sourceUrl
      }
    }
  }
}

После загрузки ваших сообщений отправьте каждый узел ваших узлов File (featuredImage) через эту функцию:

/**
 * Attaches a sharped image to the node for Gatsby Image.
 * @param image Dynamic image node to expand.
 * @param maxWidth Real existing width of file to use as default size.
 */
function attachChildImageSharp(
  image,
  maxWidth
) {
  const mediaDetails: IWpMediaDetails = image.mediaDetails;
  if (mediaDetails) {
    maxWidth = maxWidth || mediaDetails.width;
    image.localFile = image.localFile || {};
    image.localFile.childImageSharp = image.localFile.childImageSharp || {};
    const childImageSharp = image.localFile.childImageSharp;

    // only supporting fluid right now:
    const fluid = (childImageSharp.fluid =
      childImageSharp.fluid || {});
    fluid.aspectRatio =
      mediaDetails.width && mediaDetails.height
        ? mediaDetails.width / mediaDetails.height
        : undefined;
    fluid.originalImg = image.sourceUrl;
    fluid.originalName = mediaDetails.file;
    fluid.presentationHeight =
      fluid.aspectRatio && maxWidth
        ? Math.round(maxWidth / fluid.aspectRatio)
        : mediaDetails.height;
    fluid.presentationWidth = maxWidth;
    fluid.sizes = `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`;

    const srcSets = [];
    const allowedSizes = ["medium", "medium_large", "large"];
    mediaDetails.sizes.forEach((size) => {
      if (allowedSizes.indexOf(size.name) >= 0) {
        if (
          size.width === `${fluid.presentationWidth}`
        ) {
          fluid.src = size.sourceUrl;
        }
        srcSets.push(`${size.sourceUrl} ${size.width}w`);
      }
    });

    fluid.srcSet = srcSets.join(",\n");
  } else {
    console.warn("Unable to attach dynamic image sharp: Missing mediaDetails.");
  }
}

Вы будете вызывать функцию следующим образом (это также хорошее место для прикрепления общего изображения base64):

posts.nodes.forEach((post) => {
  attachChildImageSharp(post.featuredImage.node, 768);
   post.featuredImage.node.localFile.childImageSharp.fluid.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2NgYGD4DwABBAEAcCBlCwAAAABJRU5ErkJggg= = "; // 1x1 black PNG, from https://shoonia.github.io/1x1/#000000ff
});

Остерегайтесь того, что неизменяемый объект вызовет ошибки, поэтому отключите кеширование (fetchPolicy: 'no-cache', если вы используете ApolloClient). Выберите ширину в качестве второго аргумента, которая является одной из трех значений ширины, выбранных вами в настройках Wordpress для размеров изображения (не включая миниатюру).

Это решение предназначено для Gatsby Image V1, и, судя по всему, оно не идеально, но удовлетворяет мои потребности.