动态引用不在Gatsby中的静态目录中的图像

如何解决动态引用不在Gatsby中的静态目录中的图像

我有很多markdown文件，如下所示，它们在项目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`,},

然后我查询所有位于同一目录中的markdown文件：

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
                }
            }
            }
        }
    `);

并通过在节点上映射并将数据作为prop进行传递，为每个markdown文件生成如下的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中。这可能吗？

解决方法

首先：让我们清楚为什么需要将文件放在静态目录中而不是src目录中。仅将静态目录中的文件复制到静态网站的公共目录中。因此，您不能引用src目录中的文件，因为该文件在站点的最终静态版本中将不可用。 Static Folder Gatsby

第二：：建议您使用JavaScript导入所有资产。 Described here

推荐： 因此，为了通过在前题中指定图片来实现动态图像加载，我建议使用按键与图像路径。这样，您可以使用该键，然后加载所需的图像并使用javascript导入所有图像。

我还建议使用Gatsby的图像优化。 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} />
      }
    </>
  )
}

1. 使用组件的名称作为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>
  );
}