Динамически ссылаться на изображения, которые не находятся в статическом каталоге в Gatsby

Question

У меня есть несколько файлов уценки, как показано ниже, где я указываю путь к изображению в проекте по адресу src/images:

---
title: "Test"
picture: "images/image.png"
subtitle: "Hello friends"
---
this is a testing markdown file

и gatsby-config запись, на которой основаны пути к изображениям:

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

Затем я запрашиваю эти файлы уценки, которые находятся в одном каталоге:

const query = useStaticQuery(graphql`
        query MyQuery {
            allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/markdown-content/"}}, sort: {order: DESC, fields: [frontmatter___date]}) {
            edges {
                node {
                    frontmatter {
                        title
                        picture
                        subtitle
                    }
                    excerpt
                }
            }
            }
        }
    `);

и создать TestComponent как показано ниже, для каждого файла уценки путем сопоставления узлов и передачи данных в качестве опоры

const TestComponent = ({ data: { frontmatter: { title, picture, subtitle }, excerpt } }) => (
    <Container>
        <img src={picture} />
        <h1>{title}</h1>
        <h2>{maintext}</h2>
        <p>{excerpt}</p>
    </Container>
);

Проблема в том, что Гэтсби не берет изображения в build или же developпроходит, поэтому изображения битые. Единственное решение в документации для этого варианта использования - это static каталог, но я бы хотел сохранить изображения в src/images. Это возможно?

Answer 1

Во-первых: давайте проясним, почему вам нужно помещать файлы в статический каталог, а не в каталог src. Только файлы из статического каталога копируются в общедоступный каталог статического веб-сайта. Поэтому вы не можете ссылаться на файл, который находится в вашем каталоге src, так как этот файл не будет доступен в окончательной статической сборке вашего сайта. Статическая папка Гэтсби

Во-вторых: рекомендуется импортировать все активы с помощью javascript. Описано здесь

Рекомендация: поэтому для достижения динамической загрузки изображения путем указания изображения во фронтальной части я бы предложил использовать ключ вместо пути изображения. Таким образом, вы можете использовать этот ключ для загрузки нужного изображения и импорта всех ваших изображений с помощью javascript.

Я бы также порекомендовал использовать оптимизацию изображений Гэтсби. gatsby-image Это позволит вам использовать оптимизацию и импортировать ваши ресурсы с помощью javascript.

Итак, вот как я бы реализовал вашу стратегию.

1. Создайте компонент для каждого изображения, используя плагин gatsby-image для оптимизации.

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `useStaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.dev/gatsby-image
 * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
 */

export default ({ alt, ...rest }) => {
  const data = useStaticQuery(graphql`
  query {
      imageSharp(fixed: {originalName: {eq: "image-name.png"}}) {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  `)

  return (
    <>
      {data.imageSharp &&
        <Img fluid={data.imageSharp.fluid} alt={alt || 'Default alt text'} {...rest} />
      }
    </>
  )
}

2. Используйте имя компонента в качестве ключа в вашем frontmatter и создайте компонент изображения динамически из этого свойства frontmatter.

import * as Images from '../images'

const TestComponent = ({ data: { frontmatter: { title, picture, subtitle }, excerpt } }) => {
  const ImageComponent = Images[key]
  return(
    <Container>
        <ImageComponent />
        <h1>{title}</h1>
        <h2>{maintext}</h2>
        <p>{excerpt}</p>
    </Container>
  );
}