Stack Overflow
Stack Overflow

Questions tagged [gatsby-image]

Questions related to the gatsby-image plugin. https://www.gatsbyjs.org/packages/gatsby-image/

292 questions
3
votes
1 answer

How do I Lazy Load Gatsby-Plugin-Image with Swiper?

Currently when I load my slider from swiper.js gatsby image automatically loads all of the images even though they are not visible to the end user. This is not the behavior I want. I want to only load the images for the slide visible or thumbnail…
Jason Biondo
  • 736
  • 5
  • 16
  • 34
3
votes
1 answer

How to fix Invariant Violation errors when running Gatsby build/develop

I am using node v16.0.0, Gatsby v3.6.1 and Yarn v1.22.10 as the dependency manager with plugins: gatsby-source-apiserver v2.1.8. gatsby-plugin-image v1.4.0. I have used the following function on file gatsby-node.js to create nodes in GraphQL with…
Ander
  • 5,093
  • 7
  • 41
  • 70
3
votes
2 answers

Gatsby graphiQL - Cannot return null for non-nullable field ImageSharpFluid.src

I'm using Gatsby and graphql with headless WordPress for a website. I want to use a gatsby-image plugin to get srcSet and blurring effect for images that are coming from WordPress, but it throws an error in graphiQL playground. I want to explain…
Daniel Barbakadze
  • 201
  • 2
  • 14
3
votes
1 answer

Gatsby plugin image cannot read property 'startsWith'

Didn't find this on the site but I did find an open bug on Github and the only resolution, at time of writing, is to use GatsbyImage. Learning to convert a Gatsby project from 2 to 3 I've installed gatsby-plugin-image and am converting a component…
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
3
votes
2 answers

Gatsby-image: provide the right image size to different resolution

I am struggling with Gatsby-image to provide the right image size to different resolution. I have an image of size 1920x367 (width x height) and the issue is visible when window size is small (mobile for example) because gatsy-image is using an…
lezan
  • 759
  • 6
  • 23
3
votes
1 answer

Lazy Loading Blog Posts in Gatsby + JS-Search?

I am using js-search to search through some blog posts in my gatsby site. I have been following this tutorial here. const path = require("path") const axios = require("axios") exports.createPages = ({ actions }) => { const { createPage } =…
userjmillohara
  • 457
  • 5
  • 25
3
votes
3 answers

Unable to add images to mdx file in Gatsby

I am trying to import an image into an mdx file by doing this: ![alt](image.jpg). My mdx file and image are both stored in the directory src, posts, post-1. However, the image does not display. I've tried numerous file paths with no luck. The only…
Danny Adams
  • 143
  • 1
  • 8
3
votes
2 answers

graphQL + gatsby: query a field that is Image or mp4

Have a gatsby blog to which I've added a cover image that is either an image (I want that to appear as a Gatsby Image) or mp4 (I want that to appear as html5 video). The problem is, when I query this field (in my markdown posts, cover: x.mp4 or…
StephD
  • 266
  • 3
  • 20
3
votes
2 answers

gatsby & graphql : filtering for a specific single image

I don't really understand graphql or gatsby that well but I believe all my images are loaded into graphql by putting this in my gatsby-config.js { resolve: `gatsby-source-filesystem`, options: { name: `images`, …
Sam
  • 1,765
  • 11
  • 82
  • 176
3
votes
1 answer

'..\node_modules\pngquant-bin\vendor\pngquant.exe' is missing

E:\Gatsby\ecom-gatsby>gatsby develop success open and validate gatsby-configs - 0.349s success load plugins - 19.895s success onPreInit - 0.036s success initialize cache - 0.454s ⠋ copy gatsby files ERROR UNHANDLED REJECTION Processing…
Devraj Rangani
  • 101
  • 1
  • 5
3
votes
1 answer

How people use gatsby-image in real world?

I've been following this tutorial https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images but there is no way normal people would write 50 lines of code for adding an image: import React from "react" import { graphql } from…
07mm8
  • 2,702
  • 2
  • 8
  • 20
3
votes
1 answer

gatsby remark images does not display image

I've seen this elsewhere and have tried numerous things but cannot get it to work for me. .md body photos will not display via gatsby-remark-images. I have updated everything to newest versions as well. update now shows full config file config:…
TrevPennington
  • 435
  • 5
  • 15
3
votes
1 answer

How to let GraphQL know filenames are images - custom API not creating fixed/fluid images

I have a custom api endpoint that i'm accessing with gatsby-source-apiserver. I have images in my database that aren't transforming into image nodes - i.e. allowing childimagesharp In my graphql i have this structure: query MyQuery { …
amcc
  • 523
  • 5
  • 16
3
votes
0 answers

The difference in the use of images in MDX file (Gatsby)/

I'm developing the Gatsby static site, so I want to use MDX for creating pages about completed projects. Is there a difference between using standard syntax for MDX in Gatsby: ![alt](path/to/image) and using ordinary tags:
andrewnosov
  • 374
  • 4
  • 14
3
votes
1 answer

Image loading slow using gatsby-image

I have this website: https://zeitouni.herokuapp.com which has quite a few images in high quality. When the user first loads the website it takes forever for gatsby-image to load most of the images. repo of the project is here:…
SiiilverSurfer
  • 999
  • 1
  • 6
  • 12
1 2
3
…
19 20