如何使用GatsbyJS和GraphQL查询和显示包含多个图像的文件夹
GatsbyJS是一个基于React的静态网站生成器，而GraphQL是一种用于查询和操作数据的查询语言。结合使用GatsbyJS和GraphQL，可以方便地查询和显示包含多个图像的文件夹。
以下是使用GatsbyJS和GraphQL查询和显示包含多个图像的文件夹的步骤：
- 安装GatsbyJS：首先，需要在本地安装GatsbyJS。可以使用以下命令进行安装：
- 安装GatsbyJS：首先，需要在本地安装GatsbyJS。可以使用以下命令进行安装：
- 创建新的GatsbyJS项目：使用以下命令在本地创建一个新的GatsbyJS项目：
- 创建新的GatsbyJS项目：使用以下命令在本地创建一个新的GatsbyJS项目：
- 进入项目目录：使用以下命令进入新创建的项目目录：
- 进入项目目录：使用以下命令进入新创建的项目目录：
- 安装必要的依赖：使用以下命令安装必要的依赖项：
- 安装必要的依赖：使用以下命令安装必要的依赖项：
- 配置GatsbyJS插件：编辑项目根目录下的gatsby-config.js文件，添加以下代码：
- 配置GatsbyJS插件：编辑项目根目录下的gatsby-config.js文件，添加以下代码：
- 这段代码配置了GatsbyJS的插件，用于读取并处理文件系统中的图像文件。
- 创建图像文件夹：在项目根目录下的src文件夹中创建一个名为"images"的文件夹，并将包含多个图像的文件夹放入其中。
- 查询和显示图像：在项目根目录下的src/pages文件夹中创建一个名为"gallery.js"的文件，并添加以下代码：
- 查询和显示图像：在项目根目录下的src/pages文件夹中创建一个名为"gallery.js"的文件，并添加以下代码：
- 这段代码使用了GatsbyJS提供的graphql函数来查询所有位于"images"文件夹中的图像，并使用gatsby-image插件来优化和显示这些图像。
- 运行项目：使用以下命令启动GatsbyJS开发服务器：
- 运行项目：使用以下命令启动GatsbyJS开发服务器：
- 然后，在浏览器中访问http://localhost:8000/gallery，即可查看包含多个图像的文件夹的图像展示页面。
这样，你就可以使用GatsbyJS和GraphQL查询和显示包含多个图像的文件夹了。在这个过程中，GatsbyJS提供了方便的静态网站生成能力，而GraphQL则提供了灵活的数据查询和操作方式。通过结合使用它们，可以轻松地构建出功能强大且高效的图像展示页面。
推荐的腾讯云相关产品：腾讯云对象存储（COS） 腾讯云产品介绍链接地址：https://cloud.tencent.com/product/cos
相关·内容
1回答
Graphql查询不返回gatsby图像的图像，而是在graphiQL中工作。
graphql、gatsby、gatsby-image
我正在构建一个包含多个gatsby-source-filesystem实例的博客。
我试图在页面上使用gatsby图像，但它只是返回：TypeError: Cannot read property 'fixed' of undefined。
我要查询的图像位于src/images
spirits.js
import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'
import Layout from ".
浏览 2提问于2020-02-25得票数 0
回答已采纳
我用盖茨比建立了我的第一个静态网站。但在处理“盖茨比形象”方面有困难。我正在使用"gatsby- image“中的"Img”组件，它正在适当地显示正在开发中的图像，但在我构建站点时却没有显示任何内容。
我使用图像的标题：
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const Header = () => {
const data = useStat
浏览 1提问于2019-09-06得票数 6
3回答
如何使用gatsby图像查询多个图像？
reactjs、gatsby
我有16个图片，我想渲染到一个网站的网格格式。
为此，我使用了以下插件：
gatsby-image
gatsby-source-filesystem
gatsby-plugin-sharp
gatsby-transformer-sharp
我阅读了文档，据我所知，它只演示了如何查询单个图像。
例如：
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data
浏览 0提问于2019-06-04得票数 19
回答已采纳
1回答
错误:无法获取此StaticQuery的结果。这很可能是盖茨比中的一个错误，如果刷新页面没有修复它的话。
javascript、reactjs、graphql、gatsby
当我试图使用静态查询在gatsby项目中使用gatsby映像加载图像时，会出现此错误。为了给您提供一些上下文，我使用多个gatsby网站制作了一个monorepo，并重用了共享组件。文件夹的层次结构是：
包
共享用户界面
图像
lightlogo.png
- components
- lightlogo.js
- index.js
- ventures
- src
- pages
- 404.js
index.js文件导出页面的lightlogo徽标组件以访问它。
浏览 1提问于2020-12-03得票数 0
1回答
如何使用GatsbyJS编写从mdx文件中获取图像的GraphQL查询？
node.js、reactjs、graphql、gatsby
我正在尝试使用GatsbyJS创建一个博客。我遵循以下教程 https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image 博客包含标题、特色图片和文本。 MDX-file结构如下所示。 ---
title: My First Post
featuredImage: ./corgi.png
---
Post content... 而且，gatsby-node.js文件中的代码如下 exports.createPages = async ({
浏览 8提问于2019-10-06得票数 2
1回答
如何从gatsby-image包装器中移除`<noscript>`标签？
reactjs、gatsby、gatsby-image
从gatsby-image得到的静态html代码如下所示： <div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;">
<!-- Placeholder here (removed for abreviation)... -->
<picture>
<!-- Image tag and `sources` here... -->
</picture>
浏览 11提问于2021-01-10得票数 2
回答已采纳
1回答
查询返回错误“无法读取未定义的属性(读取‘节点’)”
javascript、gatsby、gatsby-image、gatsby-plugin
我正在尝试编写一个页面查询，以返回GatsbyJS项目中的一行文本和图像。我正在使用Gatsby图像插件以及‘gatsby转换器-sharp’和‘gatsby- plugin’，并且我一直收到一个错误，即从查询返回的节点是未定义的。
我的查询如下：
query ProjectsPage {
allMarkdownRemark {
nodes {
frontmatter {
featuredImg {
childImageSharp {
fluid{
...GatsbyImageSha
浏览 2提问于2021-12-15得票数 1
回答已采纳
1回答
使用gatsby-image映射图像
javascript、reactjs、gatsby、gatsby-image
尝试映射gatsby项目中文件夹中的图像。我根据我所看到的指南设置了一个我认为可以工作的查询。我没有得到任何错误和网站加载，但图像不显示。有什么想法吗？谢谢!
gatsby-config.js：
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
浏览 5提问于2020-02-10得票数 1
1回答
在图像资产上缺少“固定”和“流体”字段，并带有“网关源-理智”
graphql、gatsby、gatsby-image、sanity
我试着用gatsby-source-sanity和gatsby-image从理智中获取图像。在过去，我没有遇到像这样查询fluid图像资产的问题：
export const query = graphql`
query {
allSanityPicture {
nodes {
image {
asset {
fluid(maxWidth: 900) {
...GatsbySanityImageFluid
}
}
}
浏览 1提问于2021-04-11得票数 2
2回答
Gatsby上的情感问题(带样式的组件)
css、reactjs、gatsby、styled-components、emotion
我使用情感在我的项目中制作样式组件，现在它给我带来了问题。我是这样安装的：
npm i @emotion/react @emotion/styled gatsby-plugin-emotion
例如，如果我想在Header组件中使用它，我会这样做：
import React from 'react';
import { Link } from 'gatsby';
import Navegacion from './navegacion';
import { jsx, css } from '@emotion/react';
co
浏览 0提问于2020-11-29得票数 0
1回答
Gatsby生成、生成失败的生成JavaScript和CSS包错误
reactjs、gatsby
我在和盖茨比一起开发一个项目。当我想要构建的时候，我会在终端上得到这个错误。我尝试过许多解决方案，我删除了Node软件包-lock.json文件，我又安装了npm。我尝试过gatsby清理，我认为是由节点-sass引起的，我删除了节点-saas并重新安装了它们，我安装了旧版本，但我没有得到一个result.Has遇到的人，并解决了这个问题？你能帮忙吗？
这是我的终端
package.json
{
"name": "gatsby-starter-default",
"private": true,
"descripti
浏览 4提问于2020-12-17得票数 0
1回答
Gatsby问题-在加载和刷新时，我看到一些非样式组件的闪烁。
css、gatsby、styling、gatsby-plugin
问题-当我第一次加载页面或者刷新页面时，我会看到一些难看的非样式特征，比如大量的图片，链接回到自定义的带有下划线的蓝色文本样式，等等。
这是我的package.json文件-
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"lic
浏览 3提问于2021-01-04得票数 2
3回答
TypeError:无法读取null的属性“childImageSharp”
gatsby、gatsby-image
我正在尝试使用Gatsby图像，但获取无法读取null的属性'childImageSharp‘。我找不到哪里出了错。Topsection.js是一个under组件。图像位于src/ image.jpg /images.jpg中。仍然收到错误，无法设法解决它。我已经附上了所有的文件。请帮我解决一下。 Topsection.js const TopSection = () => {
const data = useStaticQuery(graphql`
{
featureimg: file(relativePath: { eq: "image.jp
浏览 39提问于2020-10-24得票数 1
回答已采纳
2回答
Gatsby开发人员和Gatsby信息都返回错误
node.js、gatsby
我不太清楚我的构建发生了什么，目前gatsby develop返回指向此文件的TypeError: Cannot read property 'allMarkdownRemark' of undefined gatsby-node.js:19 graphql.then.results
C:/Users/Anders/sites/gatsby-netlify-cms/gatsby-node.js:19:20 在返回有关项目error The system cannot find the path specified.的信息后，gatsby info将返回 这是gatsby-no
浏览 41提问于2018-12-23得票数 2
回答已采纳
2回答
GitHub操作失败与盖茨比错误:输入文件包含不支持的图像格式
gatsby、github-actions、netlify、gatsby-image、gatsby-plugin
我使用盖茨比和NetlifyCMS作为我的网站，目前在运行工作流 in GitHub Actions上得到以下错误消息
error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
Error: Input file contains unsupported image format
非常奇怪的是，错误没有在中发生，gatsby开发了，gatsby在我的本地系统上构建了。
插件数组如下所示：
plugins: [
{
resolve: `
浏览 5提问于2020-12-07得票数 5
回答已采纳
1回答
盖茨比评论意象与盖茨比意象的区别？
javascript、reactjs、gatsby
所有东西都可以使用gatsby-image + gatsby-plugin-sharp + gatsby-transformer-sharp + gatsby-source-filesystem创建。
那么gatsby-remark-images是用来做什么的呢？
浏览 0提问于2018-07-24得票数 0
回答已采纳
1回答
GatsbyJS文件为空-设置relativePath不起作用
javascript、gatsby、gatsby-image
我正在尝试提取一个图像：/src/images/es.png 并将其显示在gatsby页面上。页面代码如下： import React from "react"
import {
Header,
Image,
} from 'semantic-ui-react';
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import Layout from '@/components/layout'
import SEO from
浏览 17提问于2020-09-08得票数 2
1回答
graphiQl中未显示的Gatsby查询类型
javascript、gatsby
我在创建一个gatsby插件。在开发时，我没有收到任何错误或警告，但是我无法在graphiql (或http://localhost:8000/___graphql)中看到我的查询。 module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gats
浏览 14提问于2019-12-13得票数 1
回答已采纳
1回答
如何创建使用Gatsby的样式组件库包
reactjs、npm、gatsby
我正在尝试创建一个样式化的组件库包，这样我就可以在不同的项目中重用我的样式。
为了测试如何做到这一点，我有两个项目。
ExampleStyledComponent --我正在尝试构建我的components.Gatsby项目--一个简单的‘盖茨比新项目’。项目
我设法用'npm链接‘在浏览器中正确地显示了我的测试组件，但是当我应用这些样式时，我一直在浏览器中得到一个“无效钩子调用”错误。
包裹-
- src
- TestComponent.js
- index.js
- package.json
TestComponent.js -
import React from '
浏览 1提问于2020-08-12得票数 5
1回答
具有盖茨比和allImageSharp上下文的特定目标文件夹
javascript、graphql、gatsby
我是盖茨比的初学者。我尝试从一个特定的文件夹在网格中显示一批图像。我找到了一个脚本来完成这个任务，但是这会捕捉到我的data文件夹中的所有图片，并且我的目标是一个特定的目标。我尝试了一个脚本，但是当我尝试过滤这个allImageSharp时，这并不适用于allImageSharp(filter: { sourceInstanceName: { eq: "media" } }) {。当我尝试使用allImageSharp(filter: { id: { regex: "/media/" } }) {时，只显示一个空白窗口，但这很好，就像allImageSharp
浏览 2提问于2020-11-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
