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

[wangsrGit119]

Use relative paths can solve this problem.

[linhx1999]

Moving images to file '/public/images' can solve this.

export default defineConfig({
	media: {
		tina: {
			// mediaRoot: '/src/assets/images',
			// publicFolder: ''

			mediaRoot: '/public/images',
			publicFolder: ''
		}
	}
})

[muffn]

This is super annoying, I can manually edit the image links in raw/ markdown but what I am trying to achieve is that it works within the TinaCMS Rich Text Editor. But that inserts an invalid path.

None of the Workaround seem to work here though 🥲

Edit: I found a workaround using cutom templates.

I moved all images over to /public/images like @linhx1999 did (not sure if thats necessary but I did it because the image urls in the dist/_astro folder looked like they appended some hashsum or something, you might try without moving the images!)

Afterwards created a custom image component that removes the public part of the image src route.

in my tina config.ts I adjusted the RTE like this (removing the image option so my users wont accidentially use that for embedding images:

...
{
						type: 'rich-text',
					        ...,
						toolbarOverride: [
							'heading',
							'link',
							// 'image', // removed because of src problems with astro
							'quote',
							'ul',
							'ol',
							'bold',
							'italic',
							'code',
							'codeBlock',
							'mermaid',
							'table',
							'raw',
							'embed'
						],
						templates: [
							{
								name: 'ImageEmbed',
								label: 'Embed picture',
								fields: [
									{
										name: 'image',
										label: 'Embedded Picture',
										type: 'image'
									}
								]
							}
						]
					},
...

Additionally I created an astro component in the style of the already in this template provided SButton and removed the public part of the route:

ImageEmbed.astro

---
const props = Astro.props

type Props = {
	image: string
}

const adjustImageUrl = (url: string): string => {
	return url.replace(/^\/public/, '')
}

const adjustedImage = adjustImageUrl(props.image)
---

<img src={adjustedImage} alt='' />
<slot />

You also need to import it in [...slug].astro just like SButton:

<Content components={{ pre: Code, SButton, ImageEmbed }} />

Is this the best way? Im sure it's not but hey, at least it works 😄 I will also add alt tags and stuff to my custom template so the images are accessible.