We are using html-react-parse to convert raw HTML from the post_content to React components, which seems to work well in terms of Gatsby then converting them into Gatsby Images.
However, if the original img src is a thumbnail size of an image, not the original image, the rendered Gatsby Image is of the original. In other words an image like this:
Hi,
We are using html-react-parse to convert raw HTML from the post_content to React components, which seems to work well in terms of Gatsby then converting them into Gatsby Images.
However, if the original img src is a thumbnail size of an image, not the original image, the rendered Gatsby Image is of the original. In other words an image like this:
<img class="Content-thumbnail-image" src="https://our-website.com/wp-content/uploads/2021/01/some-image-filename-250x250.png" alt="">
is displayed in Gatsby like this (there's some additional stuff before but not relevant I think):
<picture><source srcset="/static/25a11384ccdc56fcd7ba963287df2001/85b06/some-image-filename.png 256w, /static/25a11384ccdc56fcd7ba963287df2001/bc282/some-image-filename.png 512w, /static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png 963w" sizes="(max-width: 963px) 100vw, 963px"><img sizes="(max-width: 963px) 100vw, 963px" srcset="/static/25a11384ccdc56fcd7ba963287df2001/85b06/some-image-filename.png 256w, /static/25a11384ccdc56fcd7ba963287df2001/bc282/some-image-filename.png 512w, /static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png 963w" src="/static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png" alt="" loading="eager" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition:opacity 500ms"></picture>
The
-250x250
at the end of the image filename disappears, and Gatsby pulls in the original image.Any idea why this is happening?
Thanks, Ben