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

feat(images): Add small snippet about the inferRemoteSize function #8808

Merged
merged 6 commits into from
Jul 18, 2024
Merged

feat(images): Add small snippet about the inferRemoteSize function #8808

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5045df1
feat(images): Add small snippet about the inferRemoteSize function
Princesseuh Jul 15, 2024
d404d7f
fix: markdown sucks
Princesseuh Jul 15, 2024
55c9422
sarah adding other edits too
sarah11918 Jul 15, 2024
7d487c4
Merge branch 'main' into feat/infer-remote-function
sarah11918 Jul 18, 2024
f09f794
Merge branch '4.12.0' into feat/infer-remote-function
sarah11918 Jul 18, 2024
927d93c
Merge branch '4.12.0' into feat/infer-remote-function
sarah11918 Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/content/docs/en/guides/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ The format of the `src` value of your image file depends on where your image fil
src="https://example.com/remote-image.jpg"
alt="descriptive text"
width="200"
height="150"
height="150"
/>
```

Expand All @@ -143,7 +143,7 @@ If an image is merely decorative (i.e. doesn't contribute to the understanding o

These properties define the dimensions to use for the image.

When using images in their original aspect ratio, `width` and `height` are optional. These dimensions can be automatically inferred from image files located in `src/` and from remote images with [`inferSize` set to `true`](#infersize).
When using images in their original aspect ratio, `width` and `height` are optional. These dimensions can be automatically inferred from image files located in `src/`. For remote images, add [the `inferSize` attribute set to `true`](#infersize) on the `<Image />` or `<Picture />` component or use [`inferRemoteSize()` function](#inferremotesize).

However, both of these properties are required for images stored in your `public/` folder as Astro is unable to analyze these files.

Expand Down Expand Up @@ -266,6 +266,17 @@ import { Image } from 'astro:assets';

`inferSize` can fetch the dimensions of a [remote image from a domain that has not been authorized](#authorizing-remote-images), however the image itself will remain unprocessed.

###### inferRemoteSize()

<p><Since v="4.12.0" /></p>

A function to infer the dimensions of remote images. This can be used as an alternative to passing the `inferSize` property.

```ts
import { inferRemoteSize } from 'astro:assets';
const {width, height} = await inferRemoteSize("https://example.com/cat.png");
```

##### Additional properties

In addition to the properties above, the `<Image />` component accepts all properties accepted by the HTML `<img>` tag.
Expand Down Expand Up @@ -742,4 +753,4 @@ export default defineConfig({

## Community Integrations

There are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
There are several third-party [community image integrations](https://astro.build/integrations?search=images) for optimizing and working with images in your Astro project.
Loading