I've tried relative and absolute paths.
I've tried importing with astro::assets, <img /> and markdown (![]()) syntax.
They work locally, but not when the site is hosted on Vercel.
Any ideas to fix are appreciated.
#Images not loading on remote with astro assets
shadow slate
stark jacinthBOT
scarlet charm
can you post the actual example that failed ?
minmal github repo, or used path, images location, config,...
shadow slate
@scarlet charm Here's one.
<Image
class="max-w-[15rem] mx-auto sm:w-1/4 sm:float-left m-5 sm:m-0 sm:mr-5 rounded-md"
src="/src/assets/steps/2/judge_XXXXXXXX.jpeg"
alt="Judge XXXXXXXX"
format="webp"
height={426}
width={340}
/>
This is /src/pages/steps/2.mdx, linking to /src/assets/steps/2/judge_XXXXXXXX.jpeg
Here's another one:
Also works on local, not on Vercel.
LOCAL
NO
NO
<img src="/_astro/src/assets/blog/XXXXXXXX-timeline/timeline.hash.png" />
NO
<img src="/_astro/blog/XXXXXXXX-timeline/timeline.hash.png" />
NO
<img src="../../assets/blog/XXXXXXXX-timeline/timeline.png" />
LOCAL
<img src="/src/assets/blog/XXXXXXXX-timeline/timeline.png" />
Local:
Remote:
Images not loading on remote with astro assets
lethal obsidian
You're supposed to import the images
See the first code example here https://docs.astro.build/en/guides/assets/#image--astroassets
Strings references are treated as-is, because they're intended for remote (as in http) paths, so in local dev the /src/ paths ends up working due to Vite serving the filesystem directly
I'm planning to add a warning for this soon, probably tomorrow...
For the Markdown ones, I would need a repo I can look at. Your relative "No" examples should be working as far as I can tell
shadow slate
You're supposed to import the images
For the <Image /> one only?
Not for the markdown ones?
lethal obsidian
No, for Markdown it should work just using a normal relative path
The path is relative to the Markdown file
So, content in src/pages referring to images in src/assets would do 
Alternatively, there's an alias provided for that specific folder, 
shadow slate
So there may be a deeper issue then
Because none of the images are showing on the remote instance
Not sitewide, looks like just in markdown files.
lethal obsidian
If you have a repo I can look at, that'd be great
shadow slate
I can't share a repo but I can share whatever files you'd need, after I redact them?
lethal obsidian
As long as I have sufficient context it should be fine
Like, the Markdown file, general structure of where things are and such
shadow slate
Well I'm working in /src/pages/blog/timeline.mdx to add the image /src/assets/blog/timeline/timeline.png
Not sure what else to include. The image isn't the problem, I've tried swapping it out. Nothing funky with the path as far as I can tell. Tried several different syntaxes to get the image to load
Seems pretty standard
lethal obsidian
Do you have the latest version of the MDX integration?
Image support was added to it only recently