动态引用非'；t在Gatsby的静态目录中

我有一堆标记文件，如下所示，我在

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

const TestComponent=（{data:{frontmatter:{title，picture，subtitle}，extract}}）=>(
{title}
{maintext}
{摘录}

);

---

问题是盖茨比在

构建

或

开发

过程中没有拾取图像，因此图像被破坏。文档中针对这个用例的唯一解决方案似乎是

静态

目录，但我希望将图像保存在

src/images

中。这可能吗？

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

Second:建议您使用javascript导入所有资产

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

我还建议使用盖茨比的图像优化。 这将允许您利用优化并使用javascript导入资产

下面是我将如何实施你的战略

使用gatsby图像插件为每个图像创建一个组件以进行优化

从“React”导入React
从“gatsby”导入{useStaticQuery，graphql}
从“盖茨比图像”导入Img
/*
*此组件是使用“盖茨比图像”构建的，以自动提供优化的服务
*延迟加载和减小文件大小的图像。图像是使用
*'useStaticQuery'，它允许我们直接从这个
*组件，而不必从页面向下传递图像数据。
*
*有关更多信息，请参阅文档：
*-‘盖茨比形象’：https://gatsby.dev/gatsby-image
*-`useStaticQuery`:https://www.gatsbyjs.org/docs/use-static-query/
*/
导出默认值（{alt，…rest}）=>{
常量数据=useStaticQuery（graphql`
质疑{
imageSharp（修复：{originalName:{eq:“image name.png”}}）{
流质{
…盖茨比磁流体
}
}
}
`)
返回(
{data.imageSharp&&
}
)
}

使用组件的名称作为frontmatter中的键，并从该frontmatter属性动态创建图像组件

import*作为“../Images”中的图像
const TestComponent=（{data:{frontmatter:{title，picture，subtitle}，extract}}）=>{
常量ImageComponent=图像[键]
返回(
{title}
{maintext}
{摘录}

);
}

首先：让我们明确为什么需要将文件放在静态目录而不是src目录中。只有静态目录中的文件才能复制到静态网站的公共目录。因此，您不能引用src目录中的文件，因为该文件在站点的最终静态构建中将不可用

Second:建议您使用javascript导入所有资产

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

我还建议使用盖茨比的图像优化。 这将允许您利用优化并使用javascript导入资产

下面是我将如何实施你的战略

使用gatsby图像插件为每个图像创建一个组件以进行优化

从“React”导入React
从“gatsby”导入{useStaticQuery，graphql}
从“盖茨比图像”导入Img
/*
*此组件是使用“盖茨比图像”构建的，以自动提供优化的服务
*延迟加载和减小文件大小的图像。图像是使用
*'useStaticQuery'，它允许我们直接从这个
*组件，而不必从页面向下传递图像数据。
*
*有关更多信息，请参阅文档：
*-‘盖茨比形象’：https://gatsby.dev/gatsby-image
*-`useStaticQuery`:https://www.gatsbyjs.org/docs/use-static-query/
*/
导出默认值（{alt，…rest}）=>{
常量数据=useStaticQuery（graphql`
质疑{
imageSharp（修复：{originalName:{eq:“image name.png”}}）{
流质{
…盖茨比磁流体
}
}
}
`)
返回(
{data.imageSharp&&
}
)
}

使用组件的名称作为frontmatter中的键，并从该frontmatter属性动态创建图像组件

import*作为“../Images”中的图像
const TestComponent=（{data:{frontmatter:{title，picture，subtitle}，extract}}）=>{
常量ImageComponent=图像[键]
返回(
{title}
{maintext}
{摘录}

);
}

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

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