Replies: 4 comments 14 replies
-
|
That's unfortunately not really possible... The image generation is done separately from this call. This is especially relevant in SSR, where the image is only generated on request Something we would be able to do is be able to get a buffer from the ESM import though, that way you could use the original image to generate your placeholder at least |
Beta Was this translation helpful? Give feedback.
-
WorkaroundTo follow up, here's the Node.js workaround I'm using in the meantime // src/lib/image.ts
import type { LocalImageProps } from "astro:assets";
import fs from "node:fs/promises";
export const getImageAsBuffer = async (src: LocalImageProps["src"]) => {
const ASSETS_DIR = "/src/assets";
const imageMetadata = await src;
return await fs.readFile(
new URL(
import.meta.env.PROD
? [
"../../dist",
// @ts-expect-error – 'Property 'src' does not exist on type'
imageMetadata?.src,
].join("")
: [
"../..",
ASSETS_DIR,
// @ts-expect-error – 'Property 'src' does not exist on type'
imageMetadata?.src.split("?orig")[0].split(ASSETS_DIR)[1],
].join(""),
import.meta.url,
),
);
};---
// src/components/example.astro
import { getImageAsBuffer } from "@/lib/image";
import image from "@/assets/images/example.jpg";
const buffer = await getImageAsBuffer(image);
--- |
Beta Was this translation helpful? Give feedback.
-
|
I'll also note that at the moment, it's possible to simply do this if you control the images: ---
import imageBuffer from "../image.png?raw";
---See https://vitejs.dev/guide/assets.html#importing-asset-as-string |
Beta Was this translation helpful? Give feedback.
-
|
I have recently ran into this as well and eventually fell back to a solution involving loading the images via In a conversation on Mastodon with @delucis, the idea was formed to perhaps introduce a new method This would have some advantages over passing the raw data as part of the import, as the transformations would be the same (even when using a custom image service) and the API would be more clean, while at the same time allowing for a lot of flexibility in handling the resulting data, for example to generate a low quality placeholder image, extracting dominant colours on a smaller version of the image, or even generating a BlurHash or ThumbHash from the scaled-down version. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Provide a mechanism for outputting the results of
Image/getImageas aBuffer(orUint8Array)Background & Motivation
In my Astro project, I have a wrapper around the official
Imagecomponent that displays a Low Quality Image Placeholder (LQIP) whilst the image is loading – you can see this in action at joebell.co.ukPrior to Astro 3.0, I stored my images in
./publicand usedplaiceholderto create aBase64LQIPIn migration to Astro 3.0, I would like to use the new
astro:assetsstrategy, but this involves some "hacking" around; by manually interpreting theImageMetadatasrcpath to extract the file, and then usingsharpto manually create aBase64image.If Astro allowed me to access the image
Buffer, I could skip the whole path hacking approach altogetherGoals
To provide a simple mechanism for consumers who wish to inline images as
Buffer; for example, to aid the generation of LQIPs or to support easier integration of images with API routesExample
Current Behaviour
Proposed Behaviour
When specifying
output: "buffer", aBufferstring (orUint8Array) would be returned:Beta Was this translation helpful? Give feedback.
All reactions