时间戳

首页 > 解决方案 > 动态引用不在 Gatsby 中的静态目录中的图像

gatsby - 动态引用不在 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`,
    },
},

然后我查询这些 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. 这可能吗？

标签： gatsbygatsby-imagegatsby-remark-image

解决方案

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

第二：建议您使用 javascript 导入所有资产。在这里描述

建议： 因此，要通过在 frontmatter 中指定图片来实现动态图像加载，我建议使用键与图像路径。这样您就可以使用该密钥加载您需要的图像并使用 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>
  );
}

推荐阅读