#Image and Picture components not working

4 messages · Page 1 of 1 (latest)

cosmic furnace
#

I can't figure out what I am doing wrong. Please help.

When I try to use the Image or Picture components, the images don't render.

image

I get this error:

Unknown image output: "undefined" used for https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png
Error: Unknown image output: "undefined" used for https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png
    at SquooshService.transform (/node_modules/@astrojs/image/dist/loaders/squoosh.js:92:13)
    at Module.get (C:\MySoftwareProjects\astro-test\node_modules\@astrojs\image\dist\endpoint.js:32:66)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async call (file:///C:/MySoftwareProjects/astro-test/node_modules/astro/dist/core/endpoint/index.js:11:20)
    at async call (file:///C:/MySoftwareProjects/astro-test/node_modules/astro/dist/core/endpoint/dev/index.js:5:10)
    at async handleRoute (file:///C:/MySoftwareProjects/astro-test/node_modules/astro/dist/vite-plugin-astro-server/index.js:267:20)
    at async handleRequest (file:///C:/MySoftwareProjects/astro-test/node_modules/astro/dist/vite-plugin-astro-server/index.js:208:12)
fetch failed

/pages/test.astro

---
import { Image, Picture } from "@astrojs/image/components";
const foo = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
---

<!DOCTYPE html>
<html lang="en">
    <body>
        <Image src={foo} width={300} aspectRatio={16 / 9} alt="Image" />

        <Picture
            src={foo}
            widths={[200, 400, 800]}
            aspectRatio={16 / 9}
            sizes="(max-width: 800px) 100vw, 800px"
            alt="Picture"
        />
    </body>
</html>
tropic sequoia
#

I had the same issue, for me changing the service to use sharp instead of the default "fixed" it

raw dragon
#

Looks like we need to clean up that error message! I think the issue there is that the format prop isn't provided, it's optional for local files but required for remote images