Question

我正在使用GatsbyJS入门版https://www.gatsbyjs.org/starters/codebushi/gatsby-starter-forty/，并且需要在页面上显示目录中的所有图片。 Gatsby推荐的导入媒体的方法是使用import语句，但这会导致在构建后将哈希添加到文件名中。例如： /static/pic09-d59e4b49832baeb9c62a7a9d6c070f8c.jpg

如果我从目录中检索所有文件名，并尝试使用<img>创建src={fileName}元素，则会导致图像空白，因为文件名与服务器上已附加哈希的文件名不匹配。

请推荐一个优雅的解决方案，以解决此问题。我的备份计划是将所有内容放入未添加哈希的static目录中，但是Gatsby文档不建议这样做：https://www.gatsbyjs.org/docs/static-folder/

这就是我现在拥有的：

import React from 'react'
import Layout from '../components/layout'

class Gallery extends React.Component {
    render() {
        const images = [];
        const req = require.context('../assets/images/signboards', false);
        req.keys().forEach(function (key) {
            images.push(key.substr(1));
        });
        return (
            <Layout>
                <div id="main">
                    <section className="spotlights">
                        <section>
                            {images.map((image) => {
                                return (
                                <div className="image">
                                <img src={'../assets/images/signboards' + image} alt="" />
                            </div>
                                )
                            })}
                        </section>
                    </section>
                </div>
            </Layout>
        )
    }
}

export default Gallery;

谢谢

Answer 1

注意：此答案假设您已经安装了gatsby-source-filesystem，gatsby-transformer-sharp和gatsby-plugin-sharp。

您可以使用graphql页面查询通过使用正则表达式匹配项过滤allFile来获取某个文件夹中某个扩展名的所有文件。

然后，您可以遍历结果边缘，并使用gatsby-image显示图像。

import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'

const IndexPage = ({data}) => (
  <>
    {data.allFile.edges.map(edge => {
      return <Img fluid={edge.node.childImageSharp.fluid} />
    })}
  </>
)

export default IndexPage

export const indexQuery = graphql`
  query AssetsPhotos {
    allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, dir: {regex: "/assets/images/signboards"}}) {
      edges {
        node {
          id
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Answer 2

您可以使用gatsby-source-filesystem插件。安装插件：

npm install-保存gatsby-source-filesystem

在gatsby.config.js中注册文件夹或其他过滤器（扩展名等），并为其命名。

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/src/pages/type1`,
    name: 'data',
  },
},

然后在组件中构建查询，如下所示：

{
allFile(filter: { sourceInstanceName: { eq: "data" } }) {
edges {
  node {
    extension
    dir
    modifiedTime
  }
} }}

您可以有许多这样的“注册”提供不同的数据（文件夹，扩展名等）

使用React在Gatsby项目中显示目录的所有图片的最佳方法是什么？

2 个答案: