Import-based API for astro:assets
(framework components)
#666
isaac-mcfadyen
started this conversation in
Proposal
Replies: 2 comments 3 replies
-
Yes! I wanted this something like day one of making My only concerns are the following:
|
Beta Was this translation helpful? Give feedback.
1 reply
-
I saw Astro's new Wondering if there's any feedback/thoughts on how we could move this proposal forward? Not being able to use images in framework components (either via Astro's built-in image utilities or via |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
astro:assets
(experimental, Astro version2.10.12
) works very well today inside.astro
files. However, the experience is a bit lacking when using framework components (such as Svelte, Vue, Lit, etc). This is a proposal for an import-based API that allows use inside those framework tools.Background & Motivation
astro:assets
allows the use of props passed to the<Image>
component to control the image parameters, such asheight
,width
, andformat
.<Image>
is an Astro component, it can't be used in UI frameworks (Svelte, Preact, Lit, etc).import Image from "../image.png"
) to import an image, which doesn't allow changing height/width/format or transforming the image at all.vite-imagetools
to import the same logo many times with different widths/heights and formats (for example, the header only uses a 120px wide logo while the body uses 500px).Image
component in these Svelte components, and I can't usevite-imagetools
alongsideastro:assets
(see below section).Goals
vite-imagetools
make this framework-agnostic by using query parameters on the import itself to specify the height, width, format, etc.import Logo from "../Logo.png?h=120&w=120&format=avif";
vite-imagetools
is not compatible (it breaks and returns undefined for imports like this) when experimentalastro:assets
is enabled, so using bothastro:assets
andvite-imagetools
at the same time is not an option.astro:assets
, it could work alongside the existingImage
component - users could use theImage
component normally, and if using framework components, could use import-based annotations instead.Example
For example, a Svelte component using this proposed API could look like:
Notice that the above component looks very similar to the existing API as well as the API from
vite-imagetools
which is widely used across Vite-powered sites. On the imported image, there is.src
and image is included in the final build. The only difference is that the imported image is automatically converted toavif
and shrunk to120px
, exactly the same as the AstroImage
component would work but inside UI framework components.Beta Was this translation helpful? Give feedback.
All reactions