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

【问题标题】：Dynamically reference images that aren't in the static directory in Gatsby动态引用不在 Gatsby 中的静态目录中的图像
【发布时间】：2021-02-12 00:52:21
【问题描述】：

我有一堆 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
                }
            }
            }
        }
    `);

并通过映射节点并将数据作为道具传递，为每个降价文件生成TestComponent，如下所示


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

问题是 Gatsby 没有在 build 或 develop 通道中拾取图像，因此图像被破坏。此用例的文档中唯一的解决方案似乎是static 目录，但我想将图像保留在src/images 中。这可能吗？

【问题讨论】：

标签： gatsby gatsby-image gatsby-remark-image

【解决方案1】：

首先：让我们弄清楚为什么需要将文件放在静态目录而不是 src 目录中。只有静态目录中的文件被复制到静态网站的公共目录中。因此，您无法引用 src 目录中的文件，因为该文件在您网站的最终静态构建中不可用。 Static Folder Gatsby

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

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

我还建议使用 Gatsby 的图像优化。 gatsby-image 这将允许您利用优化并使用 javascript 导入您的资产。

这就是我将如何实施您的策略。

使用 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} />
      }
    </>
  )
}

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

【讨论】：