Stack Overflow
Stack Overflow

Questions tagged [gatsby-image]

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

292 questions
0
votes
1 answer

Gatsbyjs image with Webp and fallback to jpg using picture tag not working

I'm using Gatsbyjs image in my react website I tried adding fallback to jpg using the picture tag but its not working, it's just loading the jpg file here is the code …
Almog
  • 2,639
  • 6
  • 30
  • 59
0
votes
1 answer

How Can I return a specific image in Gatsby for my reusable component?

So I created a reusable hero section in React and I retrieve the images from a data file, so all I need to do to update the new image is I just update my data file. I'm trying to convert this component into Gatsby, but I'm not sure how to implement…
designxd10
  • 57
  • 8
0
votes
1 answer

Gatsby contentful fluid image stretched over 100%

I'm trying to fill a div with array of images using fluid{ ...GatsbyContentfulFluid } everything works fine except that gatsby stretches images smaller than a div width to fill out whole space (which he suppose to) but my…
Jarq
  • 1
0
votes
2 answers

Can't get {data.allFile.edges.map(({ node }) to render multiple images with Gatsby + GraphQL

Description I am trying to use {data.allFile.edges.map(({ node }) to render multiple (local) images to a page, but I can't run gatsby develop successfully. Steps to reproduce My code is as follows: import React from "react" import WideGalleryLayout…
omholms
  • 1
  • 1
0
votes
1 answer

Multiple images in a row on Gatsby / Markdown?

Sorry if this question has already been asked, but is there a way to have two images side by side (or even a grid of images) in a page generated by Gatsby from a file Markdown ? I start the creation of my first site under Gatsby and for the moment,…
stellarHobbes
  • 1
0
votes
1 answer

gatsby-background-image crop left side of background image on browser resize

I can create the result that I want using regular css on a div using the code below. The image is stuck to the right side of the screen and the left side of the image crops so that when you shrink the size of the screen you still see the castle in…
Sam
  • 1,765
  • 11
  • 82
  • 176
0
votes
1 answer

Gatsby with React hook masonry - can I load media with aspect ratio?

I have a Gatsby portfolio with a ton of largeish jpgs/gifs/mp4s, using react hook masonry. Because it's loading in columns there's an undesirable stuttering loading in effect, where the images sort of bump in and push each other down. I want the…
StephD
  • 266
  • 3
  • 20
0
votes
0 answers

AWS AppSync add Gatsby-Image Fluid Image as foriegn key to Other GraphQL Model

How would I add a gatsby-image type to a field on a graphQL model like below? type PortfolioItem @model { id: ID! name: String Image: ????? ......other fields } I know im supposed to create a foreign key with another object, but how do I make…
user10410397
0
votes
1 answer

How do I use gatsby-image with an Array of Objects?

How do I use gatsby-image with an Array of Objects? For example I have this: const dataImgs = [ { id: 1, title: "Astronaut", img: "gatsby-astronaut.png" }, { id: 2, title: "Icon", img: "gatsby-icon.png" } ] And the files are in the folder…
Marios T.
  • 11
  • 1
0
votes
1 answer

Gatsby Image - possible get rid of empty div with padding?

I'm using a masonry system that doesn't work with Gatsby Image but works fine with regular jpgs and gifs. I'm 99% sure it's because of this empty div with padding that gets inserted when I use Gatsby's , the second line here:
StephD
  • 266
  • 3
  • 20
0
votes
0 answers

Loading a local image with Gatsby

I am trying to create an "avatar" component using Gatsby with typescript. Thee component is supposed to use a local image. My component looks like const avatar: React.FC = ({imageUrl, title}: Props) => (
JakobAttk
  • 113
  • 3
  • 16
0
votes
1 answer

GatsbyJs - image rendering not working when reading from config.js

I have an array of image defined in config.js. when using the config file, I am not able to render any image, however raw HTML rending is working. config.js portfolioEntry: [ { image: '../assets/images/portfolio/solo2.jpg', …
roottraveller
  • 7,942
  • 7
  • 60
  • 65
0
votes
2 answers

How to define backgrounds for background slider and how to fix it?

i am trying to make an background slider for a restaurant. and for this reason i used gatsby-image-background-slider. when i executed "gatsby develop" it shows no error while execution but when i try to browse in localhost it shows the error…
ali
  • 135
  • 1
  • 13
0
votes
2 answers

How do you add a background gradient to a gatsby image?

I am using gatsby-image and trying to add a dark gradient over the image, but it is not working as expected. Here's my code:
Colin Sygiel
  • 917
  • 6
  • 18
  • 29
0
votes
0 answers

Adding imageSharp to post.js

If I could get some direction on adding gastby-image to my post.js. I can't figure out how to get the image for the queried page. Everytime I can't seem to get variables to work. I did remove the staticQuery when using variables. but all it returned…
Johnathan Coker
  • 71
  • 1
  • 10
1 2 3
…
19 20