Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use image from Local image? #65

Open
krisnaw opened this issue Apr 13, 2023 · 6 comments
Open

How to use image from Local image? #65

krisnaw opened this issue Apr 13, 2023 · 6 comments

Comments

@krisnaw
Copy link

krisnaw commented Apr 13, 2023

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
Copy link

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
Copy link
Owner

@xiaoxinghu Thanks for pitching in here!

@krisnaw Does @xiaoxinghu code fix your problem?

@krisnaw
Copy link
Author

krisnaw commented May 10, 2023

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

Thanks, @xiaoxinghu 🙏

@pexeixv
Copy link

pexeixv commented Jul 2, 2023

How to tackle the same for an SVG?

@millette
Copy link

millette commented Jul 9, 2023

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

@BryceRussell
Copy link

BryceRussell commented Jul 12, 2023 •
edited

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@millette @xiaoxinghu @krisnaw @jonasmerlin @BryceRussell @pexeixv