michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix remote image example (#6112)

Browse source 
* Fix remote image example

`format` prop is required for remote images

* Specify `format` is only required when using `Squoosh`

- Undo changes / Restore previous content in Remote Image Examples
- Specify `format` is only required for remote images when using Squoosh(default)

* Fix backticks

* remove 'only' and backticks on squoosh

---------

Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com>
This commit is contained in:
Bryce Russell 2023-02-06 14:38:31 -06:00 committed by GitHub
parent 32abe49bd0
commit 327a76c3db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/integrations/image/README.md
View file

@ -175,8 +175,7 @@ Set to an empty string (`alt=""`) if the image is not a key part of the content
The output format to be used in the optimized image. The original image format will be used if `format` is not provided.
This property is required for remote images only, because the original format cannot be inferred.
This property is required for remote images when using the default image transformer Squoosh, this is because the original format cannot be inferred.
#### quality
<p>
@ -565,17 +564,14 @@ Remote images can be transformed with the `<Image />` component. The `<Image />`
---
import { Image } from '@astrojs/image/components';
const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
---
// cropping to a specific width and height
<Image src={imageUrl} width={544} height={184} alt="descriptive text" />
<Image src={imageUrl} width={750} height={250} format="avif" alt="descriptive text" />
// height will be recalculated to match the aspect ratio
<Image src={imageUrl} width={300} aspectRatio={16/9} alt="descriptive text" />
// cropping to a specific height and aspect ratio and converting to an avif format
<Image src={imageUrl} height={200} aspectRatio="16:9" format="avif" alt="descriptive text" />
<Image src={imageUrl} width={750} aspectRatio={16/9} format="avif" alt="descriptive text" />
```
### Responsive pictures