astro-seo
astro-seo copied to clipboard
jonasmerlin
How to use image from Local image?
On Astro file, this is how to load image from local image
index.astro
<!-- Local image stored at public/assets/stars.png --> <img src="/assets/stars.png" alt="A starry night sky.">
Using similar value on the image Propname doesn't work
---
import { SEO } from "astro-seo";
---
<html lang="en">
<head>
<SEO
title="A Very Descriptive Title"
description="A heavily optimized description full of well-researched keywords."
openGraph={{
basic: {
title: "A Very Descriptive Title",
type: "A type.",
image: "/assets/stars.png",
}
}}
/>
// ... rest of <head>
</head>
<body> // ... body </body>
</html>
this worked for me:
---
import {getImage} from 'astro:assets'
...
const cover = await getImage({ src: imagePath, format:'webp' })
const absCoverUrl = new URL(cover.src, Astro.site)
---
<div>
<SEO
openGraph={{
basic: {
image: absCoverUrl,
},
...
@xiaoxinghu Thanks for pitching in here!
@krisnaw Does @xiaoxinghu code fix your problem?
Okay, it works, although the generated URL looks weird.
Thanks, @xiaoxinghu 🙏
@xiaoxinghu tip https://github.com/jonasmerlin/astro-seo/issues/65#issuecomment-1515700920 doesn't work with experimental assets, or I last I couldn't make it work. I was expecting to generate an /_astro/an-image.jpg url but instead got the same url I provided back (/assets/images/an-image.webp).
@millette This only happens on the dev server, if you build/preview it should generate a /_astro/ image
To use a local image you can import it and use it like this:
---
import { SEO } from 'astro-seo'
import cat from '../cat.png'
---
<SEO openGraph={{
basic: {
image: cat,
type: 'type',
title: 'My cat Levi'
}
}}/>
If you are using experimental.assets image imports are an object so for this example you would use image: cat.src instead of image: cat
