gatsby + netlify cms images not loading

I followed the steps to create a gatsby site with netlify cms https://www.freecodecamp.org/news/how-to-build-a-blog-with-gatsby-and-netlify-cms/. However when I upload a blog post with images in it, the images do not display on page

As per the config.yml changes, the images/uploads folder gets added to a folder images/uploads as a sibling to content/blog folder.

On the page, the image does not load and throws the 404 error. I upload the image via netlify cms admin portal and the image url gets generated automatically and via the netlify cms admin portal images displays fine(but as a blob). How do I get the images to display on the final page here https://blogs.neelamegam.in/2024-03-24-another-day-another-image/

The settings I had worked. I think it took some time to reflect and I had to look at a different blog post to see the image uploaded due to the updated config of media_folder and public_folder.

https://blogs.neelamegam.in/2024-03-24-blogging-from-netlify-cms-what-a-wonder/