Images are not loading on my dev server from mdx files. It shows a placeholder instead
#images not loading
tough halo
hollow baneBOT
Hi @tough halo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, there could be several reasons why images are not loading from your .mdx files in Astro.
-
Incorrect Image Path: Ensure that the path to your image is correct. In Astro, images in
.mdxfiles are relative to the current file. To refer to an image that is located in the same folder as the.mdxfile, the path should start with./. If the image is not found, Astro will throw an error like "Could not find requested imageIMAGE_PATHatFULL_IMAGE_PATH." [^1^] -
Known Bugs: There are known bugs in Astro related to image loading from
.mdxfiles. For instance, there's a bug where theimgMDX component override is not used in Astro collections[^3^]. Another bug is related to the Astro:assets remote image with Vercel ImageService not using astro domains and remote patterns[^4^]. There's also a bug where "fetch failed" for<Image>component when transforming local images[^5^]. If you're experiencing any of these issues, you might want to follow the respective GitHub issues for updates or potential workarounds. -
Alt Text Missing: There's a known bug where missing alt text results in an opaque error message[^7^]. Ensure that all your images have the
altattribute. -
Remark Plugins Ignored: If you're using Remark plugins, there's a known bug where Astro 3.0 Markdown/MDX auto image asset imports ignore Remark plugins[^8^].
If none of the above solutions work, you might want to create an issue on the Astro GitHub repository[^2^] or ask for help on their Discord[^2^].