Questions related to the gatsby-image plugin. https://www.gatsbyjs.org/packages/gatsby-image/
Questions tagged [gatsby-image]
292 questions
3
votes
1 answer
How to import images within a Gatsby blog Mdx file (for a slick carousel)
I am currently trying to setup a Gatsby's blog.
While looking at the doc I came across Mdx, a way to use React component in Markdown file (which is an awesome concept by the way!).
However, I quickly ran into a limitation: it seems like at the…

Mr Washington
- 1,295
- 14
- 15
3
votes
1 answer
Gatsby-Image: Different images for Mobile / Desktop?
I want to render my gatsby-image conditionally: I want to have different images for mobile & desktop. So I need to swap them out.
Right now I am doing this:
{heroImage && (
…

R. Kohlisch
- 2,823
- 6
- 29
- 59
3
votes
1 answer
Showing a list of images with Gatsby Image and Graphql
I have been working with Gatsby and GraphQL on a project for a bit now. This is my first time using this platform so still figuring out the right way to go about it.
Right now, I have an index.js which loads a list of users from a GraphQL query such…

Anurag Ramdasan
- 4,189
- 4
- 31
- 53
3
votes
2 answers
gatsby js has blurry images when I run gatsby build
I have a site that I need to run on an internal server. I dont have access to the site and I am just going to do gatsby build and give them the public folder. But all my images are a blurry mess. Is this the right way to do it? and why are my images…

André Jarboe II
- 558
- 1
- 5
- 20
3
votes
1 answer
Removing images from the template results in File Not Found using Gatsby?
When I download Gatsby and remove the template images from the file, I get error messages, and the server does not work. When I throw the images back in it works again. I really have no idea what is going on here.
Why can't use the template without…

cyberAnn
- 411
- 1
- 7
- 16
2
votes
1 answer
SVG images don't render in Chrome for Gatsby/Headless Wordpress site
I'm using Gatsby 4.19.2 along with gatsby-source-wordpress (see package dependencies below).
I've also tried upgrading to 4.24.7 with same results. (I'd rather not go to version 5 yet unless someone thinks there's a fix waiting there.)
Here's the…

vulcan
- 706
- 5
- 8
2
votes
1 answer
Gatsby-plugin-image: Missing image prop after updating Gatsby Client
I'm building a GatsbyJs blog with Contentful and GraphQL queries. Everything was working perfectly until I updated my GatsbyJs client, npm version, and changed the structure of my Contentful Content.
Now my landing page can not load images and in…

Costis94
- 250
- 2
- 14
2
votes
0 answers
How to use Gatsby plugin image on incremental builds
I am using Gatsby 3.6.1, with Gatsby plugin image. I am fetching images using gatsby-source-apiserver, with the following structure:
[
{
"pk": 1,
"url": "https://location_of_the_image1",
},
{
"pk": 2,
"url":…

Ander
- 5,093
- 7
- 41
- 70
2
votes
0 answers
How to properly create Type definitions on Gatsby for external images
I am using Gatsby 3.6.1, with Gatsby plugin image. I am fetching images from an API which returns the following structure:
[
{
"pk": 1,
"url": "https://location_of_the_image1",
},
{
"pk": 2,
"url":…

Ander
- 5,093
- 7
- 41
- 70
2
votes
1 answer
Using GatsbyImage - I keep getting an error Failed prop type: The prop `image` is marked as required in `GatsbyImage`, but its value is `undefined`
I have all of my artists data in a json file: artists.json. In there I also have the image name I am trying to render for each artist. I attempted to use exports.sourceNodes but I must have done something wrong.
Any help you could give on this issue…

Sherre Ahlers
- 71
- 1
- 11
2
votes
1 answer
lazyloading of images gatsby
When is the large image of an lightbox loaded if the query of the image is in a parent (site) component in gatsby?
a) with the site?
b) with the small lightbox component
c) on click on the small image of the lightbox
- site component
|-…

Moritz Valentin
- 122
- 7
2
votes
1 answer
GatsbyJS: Query Gatsby-image from WPGraphQL for Advanced Custom Fields
I am trying to display a bunch of images in my GatsbyJS site from ACF image fields. When using Gatsby Image on my site it returns null. I might be missing something obvious.
I've tried changing my graphql query in all sort of ways like use…

TurboTobias
- 595
- 3
- 19
2
votes
0 answers
Query Gatsby Image Data from contentful from the client
spent some hours combing the web for an answer and beginning to sense this is not possible.
I am using the new gatsby-plugin-image with a V3 gatsby site with no issues using getImageData() in my build time queries (via import {graphql} from…

Michel
- 46
- 2
2
votes
1 answer
Missing 'fixed' and 'fluid' fields on image asset with `gatsby-source-sanity`
I'm trying to source images from Sanity with gatsby-source-sanity and gatsby-image. In the past I've had no issue querying the fluid image asset like so:
export const query = graphql`
query {
allSanityPicture {
nodes {
image {
…

Finnian Langham
- 97
- 7
2
votes
0 answers
How to get Gatsby Plugin Contentful Optional Fields working?
Having an optional field on a content type in Contentful, I tried to get Gatsby-Plugin-Contentful-Optional-Fields working.
The optional field is an image, that I render with the new Gatsby-Image-Plugin. After configuring the plugin in my…

Peter
- 21
- 3