I'm building a site with Gatsby, using Drupal to manage the content.
I'm trying to find a way to process images that have been inserted into the body (using the Drupal Media Library) so that they render in my Gatsby build. When the body is output using dangerouslySetInnerHTML (like below), the inline images paths remain relative to Drupal.
<ArticleBody dangerouslySetInnerHTML={{ __html: article.body.processed }} />
This is the output code when inspected:
<img loading="lazy" src="/sites/default/files/styles/large/public/2023-08/imageName.jpg?" width="600" height="600" alt="altName">
How can I convert each image to work in Gastby and ideally take advantage of the "gatsby-plugin-image" features (like blurred image). I've tried the method suggested here with no luck: https://www.andrewl.net/article/gatsby-drupal-inline-images?no-cache=1
I'm at a bit of a loss on how to approach this, any suggestions would be greatly appreciated...