#Cannot use local image in markdown
1 messages · Page 1 of 1 (latest)
Like this
---
import { Image } from 'astro:assets'
---
{
ogImage && (
<Image
class="post-image"
src={ogImage}
alt={title}
data-pagefind-meta="image[src], image_alt[alt]"
/>
)
}
<article>
<Content />
</article>
Everything works fine if the image is a link e.g. ogImage: https://example.com/image.jpg therefore using a local image doesn't work
If you are using src/assets then use img html else if your using public dir use Image.
As astro Image component defaults to url/assets which is what ever asset you put in your public dir.
I changed ogImage file location to the public folder (public/assets/images/default .jpg then an error:
Missing width and height attributes for /assets/images/default.jpg. When using remote images, both dimensions are required in order to avoid CLS.
I add inferSize={true} to the Image and error:
Failed to parse URL from /assets/images/default.jpg
public/assets/images/default .jpg should be public/assets/images/default.jpg
That's a typo here, but the file name is correct then error
Could you provide the content again?
Is data-pagefind-meta="image[src], image_alt[alt]" normal in a image component?
Cause that's what I can also think that could be causing an issue.
That's from a package astro-pagefind a static site search. I've tried removing it, still error. Wait I'll send some images
Just paste the error from your console or browser (if it says) here.
17:43:02 [ERROR] [MissingImageDimension] Missing width and height attributes for /assets/images/default.jpg. When using remote images, both dimensions are required in order to avoid CLS.
Hint:
If your image is inside your `src` folder, you probably meant to import it instead. See the Imports guide for more information https://docs.astro.build/en/guides/imports/#other-assets. You can also use `inferSize={true}` for remote images to get the original dimensions.
Error reference:
https://docs.astro.build/en/reference/errors/missing-image-dimension/
17:45:30 [ERROR] Failed to parse URL from /assets/images/default.jpg
Stack trace:
at node:internal/deps/undici/undici:13178:13
[...] See full stack trace in the browser, or rerun with --verbose.
Caused by:
Invalid URL
at new URL (node:internal/url:816:29)
at fetch (node:internal/deps/undici/undici:9998:25)
at fetch (node:internal/bootstrap/web/exposed-window-or-worker:72:12)