Inconsistent behaviour between build and dev with /src/assets

[WilfSilver]

Astro Info

Astro                    v4.0.3
Node                     v21.5.0
System                   Linux (x64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/starlight
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

All

Describe the Bug

I have an md file referencing an image/gif:

...
![my test image](/src/assets/image.gif)
...

If I run astro dev, it displays the image fine, however running astro build, the image does not show on the website (in place it just has the alt text)

From looking at the files, it does not transfer/build the images into the dist directory.

If I change the link to a relative one e.g. ../../assets/image.gif it works absolutely fine

What's the expected result?

Consistency between astro dev and astro build when using /src/assets.

EDIT: please see comment below, but in summary, the image should not be displayed in both instances

Link to Minimal Reproducible Example

https://github.com/WilfSilver/astro-asset-link-issue

Participation

• I am willing to submit a pull request for this issue.

[WilfSilver]

After further investigation, the issue seems to be that the images are actually displaying in astro dev.

I should be using the import.meta.env.ASSETS_PREFIX or via the path option in the typescript config explained here

Therefore, the expected result should be that astro dev does not display the images/prints out an error saying the images can't be found.

[Princesseuh]

This is because Vite serves the filesystem in dev, nothing to do with assets or images in particular. I've always found this quite weird personally, but I assume that Vite uses this for specific reasons

[bluwy]

Vite supports root-relative paths as it's advertised as a glorified filesystem server that serves files from your project root. There's a few explorations in the past to make this more strict, e.g. only allowing behind /@something/src/assets/... only, but that will be a really big breaking change.

I think we can support this in Astro if we want to since we call this.resolve here:

astro/packages/astro/src/vite-plugin-markdown/index.ts

Lines 80 to 81 in f226cb6

	resolved:
	(await this.resolve(imagePath, id))?.id ?? path.join(path.dirname(id), imagePath),

And it can resolve root-relative paths and public paths, and do some additional checks there. But I'm also fine if we want a blanket "starts with / is never handled":

astro/packages/markdown/remark/src/remark-collect-images.ts

Lines 28 to 31 in f226cb6

	function shouldOptimizeImage(src: string) {
	// Optimize anything that is NOT external or an absolute path to `public/`
	return !isValidUrl(src) && !src.startsWith('/');
	}

[matthewp]

I don't think we should try and support this, otherwise people will expect it in other places as well.

[ematipico]

Yeah, I agree with Matthew here. I would keep the behaviour as simple as possible and clarify the user expectations.

[matthewp]

After discussing this we think this might be reasonable to support and not be too difficult to implement.

[DJOCKER-FACE]

in the meantime is there any way to have the images display normally on the build?

[bluwy]

You can use relative paths, or use aliases like @assets/my-image.png

[DJOCKER-FACE]

@bluwy those didn't work, relative paths get passed as a string of text for some reason when used in .md and importing through assets directly doesn't work for build.

So this is how i kinda fixed this, i had to add those images on public/images, have to update astro(if not running latest) and then import them.

[WilfSilver]

@bluwy those didn't work, relative paths get passed as a string of text for some reason when used in .md and importing through assets directly doesn't work for build.

Could you share the code for this? Relative links and aliases were working in my original project (and the example code - relative links are used as an example of how it should be working)