Questions related to the gatsby-image plugin. https://www.gatsbyjs.org/packages/gatsby-image/
Questions tagged [gatsby-image]
292 questions
5
votes
1 answer
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 photos shot in landscape orientation are limited…
Pete
- 12,206
- 8
- 54
- 70
5
votes
3 answers
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 componentCreatedFromMarkdown = ({data}) => {
...
useEffect(() =>…
Sam
- 1,765
- 11
- 82
- 176
5
votes
2 answers
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 on my local machine. If I use…
Megan O'Brien
- 71
- 6
4
votes
2 answers
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 - /bin/zsh
Binaries:
Node: 16.14.2 -…
KOSTDM
- 79
- 6
4
votes
2 answers
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 
.
How is it done with GatsbyImage, so i can send an image using props.
.
How is it done with GatsbyImage, so i can send an image using props.
Rastislav Uhrin
- 150
- 1
- 7
4
votes
2 answers
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-sanity'
import {GatsbyImage} from…
Finnian Langham
- 97
- 7
4
votes
1 answer
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 gatsby-plugin-image gatsby-plugin-sharp…
Jon Deavers
- 139
- 1
- 2
- 14
4
votes
3 answers
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 other posts and I'm just getting nowhere. Going…
Austinmdem
- 109
- 1
- 6
4
votes
3 answers
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:
... possibly with some styling.
This is the code for a single image in Gatsby (basically copied from the Gatsby Image…
... possibly with some styling.
This is the code for a single image in Gatsby (basically copied from the Gatsby Image…
machineghost
- 33,529
- 30
- 159
- 234
4
votes
0 answers
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 add more images.
The code is organized in this…
drugo12
- 41
- 2
4
votes
0 answers
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-plugin-manifest`,
options: {
name:…
DENYHAX
- 51
- 4
3
votes
1 answer
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 following code (gallery.js):
import React from…
Nosredna
- 45
- 4
3
votes
1 answer
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:
export const mobileHeroImage = graphql`
…
Stefan
- 250
- 4
- 13
3
votes
1 answer
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 600 images inside the website and it is growing…
Baivaras
- 438
- 5
- 17
3
votes
0 answers
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 bundles.
This all started to happen after I uploaded a 70mb .mp4 video…
wchesh24
- 31
- 2