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 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 |-…
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…
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 { …
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