Questions tagged [gatsby-image]
Questions related to the gatsby-image plugin. https://www.gatsbyjs.org/packages/gatsby-image/
299
questions
16
votes
1
answer
2k
views
Strapi dynamic zone - display image in Gatsby
I am using Strapi with Gatsby and having difficulty rendering images within a dynamic zone. I am using:
Strapi 3.6.2
Gatsby 3.5.1
gatsby-source-strapi 1.0.0
gatsby-plugin-image 1.5.0
gatsby-plugin-...
- 10.7k
10
votes
2
answers
1k
views
Twitter Card Images not working on Gatsby app
I'm working on a Gatsby app with Netlify CMS (and hosted on Netlify). Trying to get the metadata working so that Twitter cards display correctly with images.
The metadata is generally all right, but ...
- 6,336
9
votes
0
answers
765
views
Missing Types in Gatsby with GatsbyImageData and Mdx
I have a site using Gatsby (with gatsby-plugin-image) and I am trying to refactor to Typescript. This is my first experience with ts
I have a layout page that uses a pagequery that pulls Mdx data, ...
- 565
8
votes
1
answer
1k
views
How to allow optional sharp image in graphql gatsby?
I typically have frontmatter that will have an array of objects, inside each object will be an image which will reference a string of a file relative to the markdown file.
The problem is, the array ...
- 528
8
votes
2
answers
2k
views
Gatsby throws SIGSEV error when running in GitHub Actions CI
I have a problem running gatsby build on my Gatsby site that only occurs when running in a Github Actions container. It doesn't always happen, either; as a good example, today Dependabot started 12 ...
- 1,487
7
votes
2
answers
8k
views
gatsby-plugin-image | <StaticImage /> Does not display the image
I want to optimize all the images on my Gatsby site and to achieve that I have installed the gatsby-image-plugin.
For the dynamic images, I am using the GatsbyImage Component and everything is ...
- 135
6
votes
1
answer
9k
views
is there a good react carousel components that will work with gatsby-image? [closed]
I'm trying to make a carousel to display some images of projects I've done. I know there are a lot of react carousel components around, so does anyone know of one that will work well with gatsby-image?...
- 236
6
votes
3
answers
1k
views
Gatsby Contentful embedded image
As I see there is no json option anymore when querying the contentfulBlogPost only raw. I was able to make some changes to get everything from the body, except the image from that post.
If I made a ...
- 63
6
votes
3
answers
4k
views
How to pass a path of image as a prop in Gatsby in Gatsby-plugin-image
I am trying to pass a path of an image as a prop to a component
Note: Both the component and the index page can access the image through the same path. It is not working when i pass the path as a prop
...
- 369
6
votes
2
answers
3k
views
GitHub Actions fail with Gatsby Error: Input file contains unsupported image format
I use Gatsby and NetlifyCMS for my website and currently get the following error message at running Workflow in GitHub Actions:
error "gatsby-plugin-manifest" threw an error while running ...
- 2,292
6
votes
3
answers
3k
views
gatsby-image-plugin, StaticImage cannot override the default wrapper style (gatsby-image-wrapper & gatsby-image-wrapper-constrained style)
I'm using GatsbyJS with TailwindCSS, When i tried passing tailwind styles into the wrapper of StaticImage from gatsby-image-plugin, the existing styles are not getting overridden (ie. gatsby-image-...
- 61
6
votes
1
answer
284
views
Make an image optional in netlify cms and gatsby js
I have a fairly simple Gatsby & Netlify CMS site. I can't cope with making images optional. In case of Netlify CMS it's just a matter of setting one field required: false. How do I write a query ...
- 122
5
votes
1
answer
2k
views
Using dynamic external urls in StaticImage in Gatsby
I'm trying to display couple of images from array of objects containing images urls. I'm aware that StaticImage has to accept local variables as props values. These two variables for image urls are ...
5
votes
1
answer
5k
views
Gatsby image fluid stretches to beyond the vertical size of the container
I'm building a gatsby site to show my photographs. I want a full-screen page for each photograph, and the photo should fill out the page, but respecting the aspect ratio.
The problem is that while ...
- 12.3k
5
votes
2
answers
2k
views
Gatsby Image Not Working - Images Blurry on Deploy or does not show up at all
Project Description: Using Gatsby to create a portfolio website to showcase my JavaScript projects.
Problem: I cannot get images to load using gatsby-image in my deployment to github pages - it works ...
5
votes
3
answers
612
views
Injecting gatsby-image into html created from markdown using ReactDOMServer.renderToString
Minimum Reproducible Example on Github
I'm trying to inject some images into my pages created from markdown. I'm trying to do this using ReactDomServer.renderToString()
const ...
- 2,000
5
votes
2
answers
3k
views
StaticImage in GatsbyJS keep format SVG
i have this code
<Link to="/">
<StaticImage
loading="eager"
src="../images/logo.svg"
alt="...
- 150
5
votes
3
answers
5k
views
Why is gatsby-plugin-image missing image prop?
Editor Note: This question may not be helpful to most people searching the [gatsby-plugin-image] Missing image prop error. The author answered his own question below at
https://stackoverflow.com/a/...
- 289
4
votes
2
answers
2k
views
gatsby-plugin-image not installing via npm
I am trying to install gatsby-plugin-image via npm per the documentation https://www.gatsbyjs.com/plugins/gatsby-plugin-image#installation
Receiving the following errors in terminal:
$ npm install ...
- 149
4
votes
3
answers
4k
views
Field "image" must not have a selection since type "String" has no subfields. - What am I missing?
Like many, all I want to do is to be able to use a simple gastby blog with NetlifyCMS. For one second I was able to get an image appear but never again after that. I've tried countless solutions from ...
- 109
4
votes
2
answers
859
views
Gatsby graphql query for GatsbyImage to use a local image from project
I'd just like to use an image using GatsbyImage component.
Normally you do it using <img src='./img.jpg'/>.
How is it done with GatsbyImage, so i can send an image using props.
- 160
4
votes
2
answers
2k
views
Querying images from Sanity for GatsbyImage
I'm having trouble sourcing images from Sanity using the new gatsby-plugin-image. The documentation says to do the following:
import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-...
4
votes
3
answers
730
views
Gatsby Would Seem to Require an 10x the Effort of Any Other Framework to Add One Image: What Am I Not Understanding?
This is the code for a single image in any other Javascript framework in existence:
<img src="images/someFile.png" />
... possibly with some styling.
This is the code for a single ...
- 34.8k
4
votes
2
answers
2k
views
gatsby stuck develop build on IMAGE_PROCESSING
The build process freezes at the moment Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs
System:
OS: macOS 12.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8.1 - /...
- 79
4
votes
0
answers
530
views
Gatsby image with staticQuery
I am trying for the first time GatsbyJs and I see the feature with ImageSharp for optimizing images.
Now, I created a component and it works fine, but I would like to optimize the code to be able to ...
- 41
4
votes
0
answers
1k
views
How to change favicon on browser tab change in gatsbyjs
I want to change between 2 favicons on browser tab change
But I don't even know where should I perform this.
The favicon is currently set in gatsby-config.js like this :
{
resolve: `gatsby-...
- 51
3
votes
1
answer
3k
views
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:
<Desktop>
{heroImage &&...
- 2,893
3
votes
2
answers
6k
views
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 ...
- 688
3
votes
3
answers
2k
views
Unable to add images to mdx file in Gatsby
I am trying to import an image into an mdx file by doing this: . My mdx file and image are both stored in the directory src, posts, post-1. However, the image does not display. I've ...
- 163
3
votes
2
answers
2k
views
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`,
...
- 2,000
3
votes
1
answer
4k
views
'..\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
...
- 109
3
votes
1
answer
2k
views
getImage by Gatsby Image plugin returns undefined
I have hero image that I want to query for multiple times and fetch it in different sizes so I can use it in different devices sizes.
My hero image is in
src/images/hero.png
This is the query code:
...
- 260
3
votes
2
answers
458
views
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 ...
- 275
3
votes
1
answer
1k
views
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 ...
- 454
3
votes
1
answer
517
views
Gatsby: getImage returns undefined
getImage is returning undefined so my GatsbyImage component is not rendered.
File structure:
src/pages/gallery.js
src/images (has 12 photos named photo-01.jpg, photo-02.jpg, ...)
I have the ...
- 45
3
votes
1
answer
845
views
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 ...
- 794
3
votes
2
answers
1k
views
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 ...
3
votes
2
answers
5k
views
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 ...
- 769
3
votes
1
answer
2k
views
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:
...
- 3,010
3
votes
1
answer
1k
views
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 ...
- 4,220
3
votes
1
answer
3k
views
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 ...
- 8,239
3
votes
1
answer
401
views
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 ...
- 533
3
votes
1
answer
2k
views
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.
...
- 1,149
3
votes
1
answer
331
views
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 ...
- 441
3
votes
1
answer
562
views
How to improve gatsby image querying for specific images
just curious about any solutions which would help to reduce the pressure on the images query inside the Gatsby website. Gatsby already gives a warning that images query takes too long (we have around ...
- 438
3
votes
0
answers
908
views
Gatsby Cloud Build Failing with "Out of Memory" Error
I'm running into an "Out of Memory" issue during my Gatsby Cloud builds for my site. It will stop running on the "Rewriting Compilation Hashes" step after building the JavaScript ...
- 31
3
votes
1
answer
3k
views
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 ...
- 5,363
3
votes
1
answer
486
views
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")
...
- 467
3
votes
0
answers
439
views
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:
...
- 383
3
votes
1
answer
2k
views
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 ...
- 1,363