Image In Post Body Cannot Displayed

[NinjaGeekDev]

Hi,
I've found that each post's hero image is displayed correctly because it's defined in the MDX frontmatter section and is built to the /dist/_astro path during the Astro build stage. Unfortunately, however, the image files referenced in the MDX body are not built to that path, which results in the images in the body not being displayed. This might be a silly question to ask, but I'm a complete beginner, could you please help me out? Thank you!

[serjs]

+1 Today notice this issue too. With same image path, adding images through tinacms. HeroImage available from _astro folder at the same time

[FahimFBA]

I am also facing this exact issue. Therefore, I am trying to change the theme entirely.

[serjs]

I read astro docs about image optimization and TinaCMS docs. Looks like there are no way to fix thus out of box. Every image in mdx must have path under src folder. In this template case, there where images mentioned ../../../src/assets/images must be placed instead /src/assets/images inserted by Tina. Correct path handled by Astro during build (image optimisation process).

We can add prebuild step with recursive find all mdx files and using sed regex rule to preprocess all images during build, but I thing it's better doing in JS, not system shell comands for exclude OS, shell differences.

[WDI-Json]

Based on @serjs I've discovered a workaround which is easy enough if you're okay with it:

---
myfields
---

import { Image } from 'astro:assets'
import image1 from '/src/assets/images/image1.png'

<Image
	src={image1}
	alt='alttext'
/>

After many attempts, this was the easiest way to work around this problem. May it serve you well.

[Brian-Kariu]

Fixed this by moving from Sharp image server to Sqoosh.
link to astro docs

import { defineConfig, squooshImageService } from 'astro/config';

export default defineConfig({
  image: {
    service: squooshImageService(),
  },
});

[NongBritee]

facing same issue