search

jonasmerlin / astro-seo

Makes it easy to add information that is relevant for SEO to your Astro app.
MIT License
908 stars 50 forks source link

How to use image from Local image? #65

Open krisnaw opened 1 year ago

krisnaw commented 1 year ago

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>
xiaoxinghu commented 1 year ago

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,
      },
...
jonasmerlin commented 1 year ago

@xiaoxinghu Thanks for pitching in here!

@krisnaw Does @xiaoxinghu code fix your problem?

krisnaw commented 1 year ago

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

Thanks, @xiaoxinghu 🙏

pexeixv commented 1 year ago

How to tackle the same for an SVG?

millette commented 1 year ago

@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).

BryceRussell commented 1 year ago

@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