Hi there,
my site is “anestiskavakopoulos”.
I am deploying a gatsby build and while I get my photo correctly displayed when run locally, I get a problem with width and height when deployed in Netlify.
I use the StaticImage from gatsby-plugin-image for my pic as seen below.
Any ideas on why I get this problem with pic dimensions getting crazy when site deployed?
How exactly is is looking locally?
Well when I run locally…I get a photo 220x250 on my top-right corner of the page.
While when I deploy it with Netlify I get a photo of 220x(full height)
As I can see, there are multiple tags being generated for the same image.
Highlighting the <div>:
Highlighting the <img>:
The <div> one seems to be generated fine, however it’s the <img> one that’s giving the problem.
Could you try to build this locally and see if you can reproduce this? I do not mean the development build. I mean, the production build, that is, run gatsby build locally and check it.
Also, try removing the placeholder attribute to see if it makes a difference.
If it still works fine, would you be willing to share the repo?
I tried both. Same results.
What I found most strange is that is affects only the height of the pic.
PS: div and img tags are generated automatically from StaticImage component
Just as I feared. I think you should take this issue to Gatsby on GitHub as it’s something not caused by Netlify. It’s difficult for us to guess the behaviour caused by external factors.
I will do that. If in the meantime find a solution I will say so here.
Thank you for your time.
Well I found a solution. I changed the static image to dynamic (GatsbyImage) through GraphQL and then I placed ‘imgStyle’ to the GatsbyImage styling inline the img with the exact css attributes and values as the imagewrapper.
I checked that it works fine if you write one css class and then you assign it to both the wrapper and the img just by assigning the same class name to ‘className’ and ‘imgClassName’.
Again thank you very much for your response, and I hope someone will find this helpful.
