Markdown & relative images

[steep light]

Hi! Let's say I have src/pages/test/index.md and src/pages/test/images/image.png files. What do I need to add this image to the markdown file by specifying its relative path (![image](./images/image.png))? I don't want to resize it or create responsive versions. I want to display it as it is. Currently, the image returns 404, because the build process does not copy it to the dist directory. 🤔

[torpid gale]

Hello!
This right there is why my website isn't on Astro yet. You cannot have relative images in Markdown in Astro. You have to either use @astro/img and import the images as MDX or move your images to the /public directory.

Believe me I'm watching every release hoping this gets fixed

[brazen holly]

I too, really wish this was "Default" behavior.
It just makes more sense to have src/data/posts/this-is-astro.md and src/data/posts/this-is-astro.png associated with one another.

[little acorn]

Hi! I'm just agreeing with everyone else here... you can't do this right now. But, I DID want to point out that Astro uses the public/ folder in exactly this way: your images won't be resized, responsive or touched in any way. Just copied directly into the dist directory.

That does NOT address the issue that they have to exist in a different place from your Markdown files. I totally admit that! 😅

But, I just wanted to make sure you knew that you can put your images in public/ and get the desired behaviour you want. (Even if you don't get the desired organization you want.)

[rapid hedge]

@sharp pumice, I may have missed the original discussion, but is there a reason why don't have a way to reference images in src from a markdown page?

[sharp pumice]

Well, we simply don't transform your relative paths based on the input path. So whatever relative path you use will be shipped to the browser

In order for that relative path to resolve, you'd need a) a non-HTML route to output your images into the right place, or b) move over the the public/ folder

I agree this is pretty frustrating! Curious if a remark or rehype plugin could solve this

@soft zodiac thoughts on transforming relative image paths via remark? I know you were briefly poking at using the Image integration from remark

[soft zodiac]

A remark plugin would probably do the trick here, or a post-build script. I think this gets back to the idea that Astro purposely doesn't touch paths a component sets in HTML, i.e. when an href or src is set Astro passes that through and doesn't try to guess at what the path really meant

[rapid hedge]

I just realized - can we use setup to import an image? (edit: realized that was only AstroFlavoredMarkdown 🤦‍♂️ )

[lucid eagle]

This is the blindspot in all of this,

[soft zodiac]

Looping back to the OP for a moment - it sounds like though public does solve the problem here it isn't a great developer experience, right?

The DX we're looking for here is .jpg and .md living next to each other in src, having to put the image files in public and markdown in src is too cumbersome

[steep light]

It's not a blocker to have images in public, but (sometimes) it would be easier to store images (or even any static files) in the same place as the markdown files. Let's say you have a blog. You can create pages/2022/post-title/index.md and it would be more convenient to put static files in pages/2022/post-title/images (easier to manage blog posts) 😉

Maybe I'll create a script to watch changes in the pages directory and copy static files to the public directory. Additionally, I could add a simple remark plugin to replace ./images with /public/images. 🤔

Thanks for the answers! It's not an important functionality. I'll figure something out. 😉

[low ledge]

Looks like this is possible with a custom integration. You can add the remark plugin via the custom integration, and then depending on dev vs build (available in the astro:config:setup hook), either configure Vite's dev server to serve the images at their relative locations (if that is possible considering they also live in a folder with .md files? needs a little research) or copy the images into the built project.

Or, man. Maybe a Vite plugin would do the whole thing... no need to distinguish between dev and build?

[rapid hedge]

This use case definitely makes sense - after all, we allow importing relative images from normal pages.

[brazen holly]

My work flow has been like this:

Write a blog post at src/data/posts/5-cli-rust-tools.md and its associated images are in public/images/5-cli-rust-tools-1.png and public/images/5-cli-rust-tools-2.png etc etc

I would LOVE to have src/data/posts/5-cli-rust-tools-1.png
Is that not possible?
Having them in public/images escapes the use of @astrojs/image

[torpid gale]

Ideally you'd want a remark plugin that pipes all relative Markdown images through @astro/img then returns the optimised images in the HTML output

[lucid eagle]

I agree, there is a number of things that this one use case presents which if we can improve I feel we would have a far better DX to this use case which is symptomatic of a wider issue, one that really needs to be explored in more detail inorder to find the right solution, its not easy but Im sure we can crack this

[proud haven]

bump. How do I import images from assets in my md blog posts? in the frontmatter using './src/assets/...' works, but not in the markdown itself. (deployed)

[patent mural]

You can follow https://docs.astro.build/en/guides/images/#images-in-markdown-files For asset folder images in the markdown, the paths will need to be relative or use an alias (if you haven't set up any https://docs.astro.build/en/guides/typescript/#import-aliases)

[proud haven]

Thankyou glad. I had a look at these and other docs but I will look again. The problem is it works locally but not deployed, Im not sure how to set the path when its deployed.

[patent mural]

It should work with the same path when deployed but you'll just need to do one of those options - relative path or alias. You can test locally first with a build e.g. npm run build, npm run preview

[proud haven]

@patent mural I did test it locally with build and it worked, but still using the same config it doesnt work when deployed.

Just note I have not updated to v3 yet

[little acorn]

Ah, images changed how they work in v3.0! relative images in markdown were actually not supported in v2.0. The only thing you could do is use full, public URLs!

Here's the upgrade advice about this specifically from v2 to v3: https://docs.astro.build/en/guides/images/#update-your-markdown-mdx-and-markdoc-files :

Relative images from your project src/ can now be referenced in Markdown, MDX, and Markdoc using standard Markdown syntax.

This allows you to move your images from the public/ directory to your project src/ where they will now be processed and optimized. Your existing images in public/ and remote images are still valid but are not optimized by Astro’s build process.

There is an entire section on this page re: upgrading from v2.x to v3 with respect to images, starting here: https://docs.astro.build/en/guides/images/#upgrade-to-v30-from-v2x

[proud haven]

Thankyou @little acorn I was avoiding upgrading but will give it a shot. And thanks for referencing the feature integration upgrade. I was not aware of that.