Can't upload images in Post Body

[nerdogram]

Hi - it seems the Post Body is not setup to handle any images? I get the following error on the Netlify Build:

7:30:33 PM: error There was an error in your GraphQL query:
7:30:33 PM: Input file contains unsupported image format
7:30:33 PM:    1 | fragment GatsbyContentfulFluid_tracedSVG on ContentfulFluid {
7:30:33 PM: >  2 |   tracedSVG
7:30:33 PM:      |   ^
7:30:33 PM:    3 |   aspectRatio
7:30:33 PM:    4 |   src
7:30:33 PM:    5 |   srcSet
7:30:33 PM:    6 |   sizes
7:30:33 PM:    7 | }
7:30:33 PM:    8 |
7:30:33 PM:    9 | query HomeQuery {
7:30:33 PM:   10 |   allContentfulBlogPost(sort: {fields: [publishDate], order: DESC}) {
7:30:33 PM:   11 |     edges {
7:30:33 PM:   12 |       node {
7:30:33 PM: File path: /opt/build/repo/src/pages/index.js
7:30:33 PM: Url path: /
7:30:33 PM: Plugin: none

Is there a way to fix this? Thanks,

[gregferg]

Hi @alvisanovari, thanks for reporting. I'll be able to look into this in a few days.

[gregferg]

Hi @alvisanovari , could you provide more details about this error? I'm assuming, but want to double check, that by Post Body, you mean a Blog Post's Body content. Could you also provide information about the image you uploaded to the Blog Post's Body content? What type of image was it? PNG, JPEG, etc?

I was able to add an image to the Body content then deploy to Netlify so want to see what edge case this might be failing on. Thanks!

[axe312ger]

These messages usually come from:

• mutliple react versions
• multiple gatsby versions
• multiple graphql versions
• version mismatches

try the following:

• yarn upgrade-interactive or https://docs.npmjs.com/cli/v6/commands/npm-update
• https://github.com/atlassian/yarn-deduplicate did wonders for me
• delete yarn.lock and yarn again
• Does it work locally? Please provide us more details to your case

[nerdogram]

Yes its in the blog post body. It fails for some images and not others. I gave up trying to debug and just used different images. 🤷

[nerdogram]

Oh wait I'm being dumb I actually solved this a while back haha. Just change the GraphQL query it doesn't like the GatsbyContentfulFluid_tracedSVG field for some images. Here's an example:

Change

          heroImage {
            fluid(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
          description {

To

          heroImage {
            fluid(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
              ...GatsbyContentfulFluid
            }
          }
          description {

[axe312ger]

It fails for some images and not others.

Can you please open an issue in the Gatsby repository with some example images that fail with GatsbyContentfulFluid_tracedSVG?

That way we could fix it for u and others :)

[hajadelmas]

Hello, all of my image can be show. I can show an image if I change "position : relative " to comment but the image take his original size. I think it's a absolute or relative problem in CSS.

[axe312ger]

Aligning images via css can be nasty with gatsby-image. Check the docs here: https://www.gatsbyjs.com/plugins/gatsby-image/

There will be a successor plugin soon, this one should make it much easier:

https://www.gatsbyjs.com/plugins/gatsby-plugin-image/