Bug: Error displaying images in posts

[vi8pro]

Visit the homepage, click on any article containing an image. The image in the article will not display, you will have to refresh the article to display the image. I use Chrome on iphone 12 promax.

[QuantGeekDev]

I think it's due to the client-side routing. The same happens with gifs - which I addressed in my media optimizatoin pull request #826 but it still happens with images embedded through markdown

[hungvu946]

Let's go to overreacted.io, turn on debugger (F12 chrome > Network), and click post Algebraic Effects for the Rest of Us
And observing through the debugger, every time the page is loaded it will load 2 images:

1. https://overreacted.io/effects.jpg - 404
2. https://overreacted.io/algebraic-effects-for-the-rest-of-us/effects.jpg

I can't find why it loads the first url resulting in a 404 error. Any ideas?

[hungvu946]

I have found the solution. Need to handle adding the article slug to the img's src
in page.js, add img to MDXRemote:

img: (props) => {
	if (props.src) {
	  props.src = `/${params.slug}/${props.src}`;
	}

	return <img {...props} />;
},

[QuantGeekDev]

@hungvu946
Smart, are you going to PR it or should I add it?