How to use image from Local image? about astro-seo HOT 6 OPEN

Okay, it works, although the generated URL looks weird.

Thanks, @xiaoxinghu 🙏

from astro-seo.

@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

from astro-seo.

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,
      },
...

from astro-seo.

@xiaoxinghu Thanks for pitching in here!

@krisnaw Does @xiaoxinghu code fix your problem?

from astro-seo.

How to tackle the same for an SVG?

from astro-seo.

@xiaoxinghu tip #65 (comment) 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).

from astro-seo.