` selon le cas dans vos composants Vue.
-Le composant `` d'Astro fonctionne uniquement dans les fichiers `.astro` et `.mdx`. Consultez la [liste complète de ses attributs de composants](/fr/reference/modules/astro-assets/#propriétés-dimage) et notez que plusieurs différeront des attributs de Nuxt.
+Le composant `` d'Astro fonctionne uniquement dans les fichiers `.astro` et `.mdx`. Consultez la [liste complète de ses attributs de composants](/fr/reference/modules/astro-assets/#image-) et notez que plusieurs différeront des attributs de Nuxt.
```astro title="src/pages/index.astro"
---
diff --git a/src/content/docs/fr/guides/upgrade-to/v3.mdx b/src/content/docs/fr/guides/upgrade-to/v3.mdx
index 7595fb06ca2d3..dc4ac07efdafb 100644
--- a/src/content/docs/fr/guides/upgrade-to/v3.mdx
+++ b/src/content/docs/fr/guides/upgrade-to/v3.mdx
@@ -829,7 +829,7 @@ Si vous utilisiez l'intégration d'images dans Astro v2.x, procédez comme suit
Modifiez toutes les instructions `import` de `@astrojs/image/components` en `astro:assets` afin d'utiliser le nouveau composant `` intégré.
- Supprimez tous les attributs de composant qui ne sont pas des [propriétés d'éléments d'image actuellement prises en charge](/fr/reference/modules/astro-assets/#propriétés-dimage).
+ Supprimez tous les attributs de composant qui ne sont pas des [propriétés d'éléments d'image actuellement prises en charge](/fr/reference/modules/astro-assets/#image-).
Par exemple, `aspectRatio` n'est plus pris en charge, car il est désormais automatiquement déduit des attributs `width` et `height`.
diff --git a/src/content/docs/fr/reference/image-service-reference.mdx b/src/content/docs/fr/reference/image-service-reference.mdx
index 1b0424593d1e7..0a7a40484f6b0 100644
--- a/src/content/docs/fr/reference/image-service-reference.mdx
+++ b/src/content/docs/fr/reference/image-service-reference.mdx
@@ -129,7 +129,7 @@ En mode développement et lors de l'utilisation d'un adaptateur pour effectuer l
#### getConfiguredImageService & imageConfig
-Si vous implémentez votre propre point de terminaison en tant que point de terminaison Astro, vous pouvez utiliser `getConfiguredImageService` et `imageConfig` pour appeler les méthodes `parseURL` et `transform` de votre service et fournir la configuration de l'image.
+Si vous implémentez votre propre point de terminaison en tant que point de terminaison Astro, vous pouvez utiliser [`getConfiguredImageService`](/fr/reference/modules/astro-assets/#getconfiguredimageservice) et [`imageConfig`](/fr/reference/modules/astro-assets/#imageconfig) pour appeler les méthodes `parseURL` et `transform` de votre service et fournir la configuration de l'image.
Pour accéder à la configuration du service d'image ([`image.service.config`](/fr/reference/configuration-reference/#imageservice)), vous pouvez utiliser `imageConfig.service.config`.
@@ -162,7 +162,7 @@ export const GET: APIRoute = async ({ request }) => {
-**Type :** `(options: ImageTransform, imageConfig: AstroConfig['image']) => string | Promise`
+**Type :** (options: ImageTransform, imageConfig: AstroConfig['image']) => string | Promise\
@@ -172,30 +172,13 @@ Pour les services locaux, ce hook renvoie l'URL du point de terminaison qui gén
Pour les services externes, ce hook renvoie l'URL finale de l'image.
-Pour les deux types de services, les `options` sont les propriétés passées par l'utilisateur comme attributs du composant `` ou comme options de `getImage()`. Elles sont du type suivant :
-
-```ts
-export type ImageTransform = {
- // Images importées par l'ESM | chemins d'accès aux images distantes/publiques
- src: ImageMetadata | string;
- width?: number | undefined;
- height?: number | undefined;
- widths?: number[] | undefined;
- densities?: (number | `${number}x`)[] | undefined;
- quality?: ImageQuality | undefined;
- format?: OutputFormat | undefined;
- fit?: ImageFit | undefined;
- position?: string | undefined;
- [key: string]: any;
-};
-```
-
+Pour les deux types de services, les `options` sont les propriétés passées par l'utilisateur comme attributs du composant `` ou comme options de `getImage()`.
### `parseURL()`
-**Type :** `(url: URL, imageConfig: AstroConfig['image']) => { src: string, [key: string]: any } | undefined | Promise<{ src: string, [key: string]: any }> | Promise`
+**Type :** (url: URL, imageConfig: AstroConfig['image']) => \{ src: string, [key: string]: any \} | undefined | Promise\<\{ src: string, [key: string]: any \}\> | Promise\
@@ -207,7 +190,7 @@ Ce hook analyse les URLs générées par `getURL()` en un objet avec les différ
-**Type :** `(inputBuffer: Uint8Array, options: { src: string, [key: string]: any }, imageConfig: AstroConfig['image']) => Promise<{ data: Uint8Array; format: ImageOutputFormat }>`
+**Type :** (inputBuffer: Uint8Array, options: \{ src: string, [key: string]: any \}, imageConfig: AstroConfig['image']) => Promise\<\{ data: Uint8Array; format: ImageOutputFormat \}\>
@@ -221,7 +204,7 @@ Vous devez renvoyer un `format` pour garantir que le type MIME approprié est fo
-**Type :** `(options: ImageTransform, imageConfig: AstroConfig['image'] ) => Record | Promise>`
+**Type :** (options: ImageTransform, imageConfig: AstroConfig['image'] ) => Record\ | Promise\\>
@@ -233,7 +216,7 @@ Ce hook renvoie tous les attributs supplémentaires utilisés pour restituer l'i
-**Type :** `(options: ImageTransform, imageConfig: AstroConfig['image'] ) => UnresolvedSrcSetValue[] | Promise`
+**Type :** (options: ImageTransform, imageConfig: AstroConfig['image'] ) => UnresolvedSrcSetValue[] | Promise\
@@ -255,7 +238,7 @@ export type UnresolvedSrcSetValue = {
-**Type :** `(options: ImageTransform, imageConfig: AstroConfig['image'] ) => ImageTransform | Promise`
+**Type :** (options: ImageTransform, imageConfig: AstroConfig['image'] ) => ImageTransform | Promise\
@@ -310,540 +293,3 @@ Les utilisateurs pourront alors bénéficier de la saisie semi-automatique et de
// ^^^^^^^^^^
// Type 'string' is not assignable to type 'number | undefined'.
```
-
-## Utilitaires
-
-Astro propose plusieurs fonctions d'assistance permettant de développer un service d'images personnalisé. Ces utilitaires peuvent être importés depuis `astro/assets/utils` :
-
-```ts
-import {
- isRemoteAllowed,
- matchHostname,
- matchPathname,
- matchPattern,
- matchPort,
- matchProtocol,
- isESMImportedImage,
- isRemoteImage,
- resolveSrc,
- imageMetadata,
- emitESMImage,
- emitImageMetadata,
- getOrigQueryParams,
- inferRemoteSize,
- propsToFilename,
- hashTransform
-} from "astro/assets/utils";
-```
-
-### `isRemoteAllowed()`
-
-
-**Type :** `(src: string, { domains, remotePatterns }: {domains: string[], remotePatterns: RemotePattern[] }) => boolean`
-
-
-
-Détermine si une ressource distante donnée, identifiée par son URL source, est autorisée en fonction de domaines spécifiés et de modèles distants.
-
-
-```ts
-import { isRemoteAllowed } from 'astro/assets/utils';
-
-const testImageURL = 'https://example.com/images/test.jpg';
-const domains = ['example.com', 'anotherdomain.com'];
-const remotePatterns = [
- { protocol: 'https', hostname: 'images.example.com', pathname: '/**' }, // Autoriser n'importe quel chemin sous ce nom d'hôte
-];
-
-const url = new URL(testImageURL);
-const isAllowed = isRemoteAllowed(url.href, { domains, remotePatterns });
-
-console.log(`L'image distante est-elle autorisée ? ${isAllowed}`);
-```
-
-### `matchHostname()`
-
-
-**Type :** `(url: URL, hostname?: string, allowWildcard = false) => boolean`
-
-
-
-Fait correspondre le nom d'hôte d'une URL donnée à un nom d'hôte spécifié, avec prise en charge facultative des modèles génériques.
-
-```ts
-import { matchHostname } from 'astro/assets/utils';
-
-const testURL = new URL('https://sub.example.com/path/to/resource');
-
-// Exemple d'utilisation de matchHostname
-const hostnameToMatch = 'example.com';
-
-// Correspondance sans caractère générique
-const isMatchWithoutWildcard = matchHostname(testURL, hostnameToMatch);
-console.log(`Le nom d'hôte correspond-il sans caractère générique ? ${isMatchWithoutWildcard}`); // Sortie : false
-
-// Correspondance avec un caractère générique
-const isMatchWithWildcard = matchHostname(testURL, hostnameToMatch, true);
-console.log(`Le nom d'hôte correspond-il avec un caractère générique ? ${isMatchWithWildcard}`); // Sortie : true
-```
-
-### `matchPathname()`
-
-
-**Type :** `(url: URL, pathname?: string, allowWildcard = false) => boolean`
-
-
-
-Fait correspondre le chemin d'accès d'une URL donnée à un modèle spécifié, avec prise en charge facultative des caractères génériques.
-
-```ts
-import { matchPathname } from 'astro/assets/utils';
-
-const testURL = new URL('https://example.com/images/photo.jpg');
-
-// Exemple de chemin d'accès à faire correspondre
-const pathnameToMatch = '/images/photo.jpg';
-
-// Correspondance sans caractère générique
-const isMatchWithoutWildcard = matchPathname(testURL, pathnameToMatch);
-console.log(`Le nom du chemin correspond-il sans caractère générique ? ${isMatchWithoutWildcard}`); // Sortie : true
-
-// Correspondance avec un caractère générique
-const wildcardPathname = '/images/*';
-const isMatchWithWildcard = matchPathname(testURL, wildcardPathname, true);
-console.log(`Le nom du chemin correspond-il avec un caractère générique ? ${isMatchWithWildcard}`); // Sortie : true
-```
-
-### `matchPattern()`
-
-
-**Type :** `(url: URL, remotePattern: RemotePattern) => boolean`
-
-
-
-Évalue si une URL donnée correspond au modèle distant spécifié en fonction du protocole, du nom d'hôte, du port et du chemin d'accès.
-
-```ts
-import { matchPattern } from 'astro/assets/utils';
-
-const testURL = new URL('https://images.example.com/photos/test.jpg');
-
-// Définir un modèle distant pour correspondre à l'URL
-const remotePattern = {
- protocol: 'https',
- hostname: 'images.example.com',
- pathname: '/photos/**', // Caractère générique pour autoriser tous les fichiers sous /photos/
- port: '', // Facultatif : faites correspondre n'importe quel port ou laissez vide par défaut
-};
-
-// Vérifiez si l'URL correspond au modèle distant
-const isPatternMatched = matchPattern(testURL, remotePattern);
-
-console.log(`L'URL correspond-elle au modèle distant ? ${isPatternMatched}`); // Sortie : true
-```
-
-### `matchPort()`
-
-
-**Type :** `(url: URL, port?: string) => boolean`
-
-
-
-Vérifie si le port de l'URL donnée correspond au port spécifié. Si aucun port n'est fourni, renvoie `true`.
-
-```ts
-import { matchPort } from 'astro/assets/utils';
-
-const testURL1 = new URL('https://example.com:8080/resource');
-const testURL2 = new URL('https://example.com/resource');
-
-// Exemple d'utilisation de matchPort
-const portToMatch = '8080';
-
-// Faire correspondre une URL avec un port spécifié
-const isPortMatch1 = matchPort(testURL1, portToMatch);
-console.log(`Le port correspond-il ? ${isPortMatch1}`); // Sortie : true
-
-// Faire correspondre une URL sans port spécifié (le port par défaut sera supposé)
-const isPortMatch2 = matchPort(testURL2, portToMatch);
-console.log(`Le port correspond-il ? ${isPortMatch2}`); // Sortie : false
-
-// Vérifier une URL sans fournir explicitement de port (la valeur par défaut est true si le port n'est pas défini)
-const isPortMatch3 = matchPort(testURL1);
-console.log(`Le port correspond-il (aucun port spécifié) ? ${isPortMatch3}`); // Sortie : true
-```
-
-### `matchProtocol()`
-
-
-**Type :** `(url: URL, protocol?: string) => boolean`
-
-
-
-Compare le protocole de l'URL fournie avec un protocole spécifié.
-
-```ts
-import { matchProtocol } from 'astro/assets/utils';
-
-const testURL1 = new URL('https://example.com/resource');
-const testURL2 = new URL('http://example.com/resource');
-
-// Exemple d'utilisation de matchProtocol
-const protocolToMatch = 'https';
-
-// Faire correspondre une URL avec le bon protocole
-const isProtocolMatch1 = matchProtocol(testURL1, protocolToMatch);
-console.log(`Le protocole correspond-il pour testURL1 ? ${isProtocolMatch1}`); // Sortie : true
-
-// Faire correspondre une URL avec un protocole incorrect
-const isProtocolMatch2 = matchProtocol(testURL2, protocolToMatch);
-console.log(`Le protocole correspond-il pour testURL2? ${isProtocolMatch2}`); // Sortie : false
-
-// Faire correspondre une URL sans fournir explicitement de protocole (la valeur par défaut est true si le protocole n'est pas défini)
-const isProtocolMatch3 = matchProtocol(testURL1);
-console.log(`Le protocole correspond-il (aucun protocole spécifié) ? ${isProtocolMatch3}`); // Sortie : true
-```
-
-### `isESMImportedImage()`
-
-
- **Type :** `(src: ImageMetadata | string) => boolean`
-
-
-
-Détermine si la source donnée est une image importée en tant que module ECMAScript (ESM).
-
-```ts
-import { isESMImportedImage } from 'astro/assets/utils';
-
-// Exemple d'utilisation de isESMImportedImage
-const imageMetadataExample = {
- src: '/images/photo.jpg',
- width: 800,
- height: 600,
- format: 'jpg',
-};
-
-const filePathExample = '/images/photo.jpg';
-
-// Vérifiez si l'entrée est une image importée ESM
-const isMetadataImage = isESMImportedImage(imageMetadataExample);
-console.log(`Est-ce que imageMetadataExample est une image importée ESM ? ${isMetadataImage}`); // Résultat : true
-
-const isFilePathImage = isESMImportedImage(filePathExample);
-console.log(`filePathExample est-il une image importée ESM ? ${isFilePathImage}`); // Résultat : false
-```
-
-
-### `isRemoteImage()`
-
-
- **Type :** `(src: ImageMetadata | string) => boolean`
-
-
-
-Détermine si la source fournie est une URL d'image distante sous la forme d'une chaîne de caractères.
-
-
-```ts
-import { isRemoteImage } from 'astro/assets/utils';
-
-// Exemple d'utilisation de isRemoteImage
-const remoteImageUrl = 'https://example.com/images/photo.jpg';
-const localImageMetadata = {
- src: '/images/photo.jpg',
- width: 800,
- height: 600,
- format: 'jpg',
-};
-
-// Vérifiez si l'entrée est une URL d'image distante
-const isRemote1 = isRemoteImage(remoteImageUrl);
-console.log(`remoteImageUrl est-elle une image distante ? ${isRemote1}`); // Résultat : true
-
-const isRemote2 = isRemoteImage(localImageMetadata);
-console.log(`localImageMetadata est-elle une image distante ? ${isRemote2}`); // Résultat : false
-```
-
-### `resolveSrc()`
-
-
- **Type :** `(src: UnresolvedImageTransform['src']) => Promise`
-
-
-
-Renvoie la source de l'image. Cette fonction garantit que si `src` est une promesse (par exemple, une importation dynamique (`import()`)), elle est attendue et la bonne `src` est extraite. Si `src` est déjà une valeur résolue, elle est renvoyée telle quelle.
-
-```ts
-import { resolveSrc } from 'astro/assets/utils';
-import imageLocale from "./images/photo.jpg";
-
-const resolvedLocal = await resolveSrc(imageLocale);
-// sera `{ src: '/images/photo.jpg', width: 800, height: 600, format: 'jpg' }`
-
-const resolvedRemote = await resolveSrc("https://example.com/img-distante.jpg");
-// sera `"https://example.com/img-distante.jpg"`
-
-const resolvedDynamic = await resolveSrc(import("./images/image-dynamique.jpg"))
-// sera `{ src: '/images/image-dynamique.jpg', width: 800, height: 600, format: 'jpg' }`
-```
-
-
-### `imageMetadata()`
-
-
- **Type :** `(data: Uint8Array, src?: string) => Promise>`
-
-
-
-Extrait les métadonnées de l'image telles que les dimensions, le format et l'orientation des données d'image fournies.
-
-```ts
-import { imageMetadata } from 'astro/assets/utils';
-
-async function extractImageMetadata() {
- // Exemple de données d'image (Uint8Array)
- const exampleImageData = new Uint8Array([/* ...données d'image binaires... */]);
-
- // Chemin source facultatif (utile pour le débogage ou le contexte de métadonnées supplémentaires)
- const sourcePath = '/images/photo.jpg';
-
- try {
- // Extraire les métadonnées des données d'image
- const metadata = await imageMetadata(exampleImageData, sourcePath);
-
- console.log("Métadonnées d'image extraites :", metadata);
- // Exemple de sortie :
- // {
- // width: 800,
- // height: 600,
- // format: 'jpg',
- // orientation: undefined
- // }
- } catch (error) {
- console.error("Échec de l'extraction des métadonnées de l'image :", error);
- }
-}
-
-await extractImageMetadata();
-```
-
-### `emitESMImage()`
-
-:::caution[Dépréciée]
-Utilisez plutôt la fonction [`emitImageMetadata`](#emitimagemetadata).
-:::
-
-
- **Type :** `(id: string | undefined, _watchMode: boolean, experimentalSvgEnabled: boolean, fileEmitter?: FileEmitter) => Promise`
-
-
-
-
-Traite un fichier image et émet ses métadonnées et éventuellement son contenu. En mode compilation, la fonction utilise `fileEmitter` pour générer une référence de ressource. En mode développement, elle résout l'URL d'un fichier local avec des paramètres de requête pour les métadonnées.
-
-```ts
-
-import { emitESMImage } from 'astro/assets/utils';
-
-const imageId = '/images/photo.jpg';
-const unusedWatchMode = false; // Dépréciée, inutilisé
-const unusedExperimentalSvgEnabled = false; // Définissez sur `true` uniquement si vous utilisez SVG et souhaitez que les données du fichier soient intégrées
-
-try {
- const result = await emitESMImage(imageId, unusedWatchMode, unusedExperimentalSvgEnabled);
- if (result) {
- console.log("Métadonnées d'image avec contenu :", result);
- // Exemple de sortie :
- // {
- // width: 800,
- // height: 600,
- // format: 'jpg',
- // contents: Uint8Array([...])
- // }
- } else {
- console.log("Aucune métadonnée n'a été émise pour cette image.");
- }
-} catch (error) {
- console.error("Échec de l'émission de l'image ESM :", error);
-}
-
-```
-
-### `emitImageMetadata()`
-
-
- **Type :** `(id: string | undefined, fileEmitter?: FileEmitter) => Promise`
-
-
-
-
-Traite un fichier image et émet ses métadonnées et éventuellement son contenu. En mode compilation, la fonction utilise `fileEmitter` pour générer une référence de ressource. En mode développement, elle résout l'URL d'un fichier local avec des paramètres de requête pour les métadonnées.
-
-```ts
-
-import { emitImageMetadata } from 'astro/assets/utils';
-
-const imageId = '/images/photo.jpg';
-
-try {
- const result = await emitImageMetadata(imageId);
- if (result) {
- console.log("Métadonnées d'image avec contenu :", result);
- // Exemple de sortie :
- // {
- // width: 800,
- // height: 600,
- // format: 'jpg',
- // contents: Uint8Array([...])
- // }
- } else {
- console.log("Aucune métadonnée n'a été émise pour cette image.");
- }
-} catch (error) {
- console.error("Échec de l'émission de l'image ESM :", error);
-}
-
-```
-
-### `getOrigQueryParams()`
-
-
- **Type :** `(params: URLSearchParams) => Pick | undefined`
-
-
-
-
-Récupère la largeur (`width`), la hauteur (`height`) et le `format` d'une image à partir d'un objet [`URLSearchParams`](https://developer.mozilla.org/fr/docs/Web/API/URLSearchParams). Si l'un de ces paramètres est manquant ou non valide, la fonction renvoie `undefined`.
-
-```ts
-
-import { getOrigQueryParams } from 'astro/assets/utils';
-
-const url = new URL('https://example.com/image.jpg?width=800&height=600&format=jpg');
-const queryParams = url.searchParams;
-
-// Extraire les paramètres de requête d'origine
-const origParams = getOrigQueryParams(queryParams);
-
-if (origParams) {
- console.log("Paramètres de requête d'origine :", origParams);
- // Exemple de sortie :
- // {
- // width: 800,
- // height: 600,
- // format: 'jpg'
- // }
-} else {
- console.log("Échec de l'extraction des paramètres de requête d'origine.");
-}
-```
-
-### `inferRemoteSize()`
-
-
- **Type :** `(url: string) => Promise>`
-
-
-
-Déduit les dimensions d'une image distante en diffusant ses données et en les analysant progressivement jusqu'à ce que suffisamment de métadonnées soient disponibles.
-
-```ts
-
-import { inferRemoteSize } from 'astro/assets/utils';
-
-async function getRemoteImageSize() {
- const remoteImageUrl = 'https://example.com/image.jpg';
-
- try {
- // Déduire la taille de l'image distante à partir de l'URL
- const imageSize = await inferRemoteSize(remoteImageUrl);
-
- console.log("Taille de l'image distante déduite :", imageSize);
- // Exemple de sortie :
- // {
- // width: 1920,
- // height: 1080,
- // format: 'jpg'
- // }
- } catch (error) {
- console.error("Impossible de déduire la taille de l'image distante :", error);
- }
-}
-
-await getRemoteImageSize();
-```
-
-### `propsToFilename()`
-
-
- **Type :** `(filePath: string, transform: ImageTransform, hash: string) => string`
-
-
-
-
-Génère un nom de fichier formaté pour une image en fonction de son chemin source, de ses propriétés de transformation et d'un hachage unique.
-
-Le nom de fichier formaté suit cette structure :
-
-`/_`
-
-- `prefixDirname` : Si l'image est une image importée ESM, il s'agit du nom du répertoire du chemin du fichier d'origine ; sinon, ce sera une chaîne de caractères vide.
-- `baseFilename` : Le nom de base du fichier ou un nom court haché si le fichier est un URI `data:`.
-- `hash` : Une chaîne de hachage unique générée pour distinguer le fichier transformé.
-- `outputExtension` : L'extension du fichier de sortie souhaitée dérivée de `transform.format` ou de l'extension du fichier d'origine.
-
-```ts
-import { propsToFilename } from 'astro/assets/utils';
-
-function generateTransformedFilename() {
- const filePath = '/images/photo.jpg';
- const transform = {
- format: 'png',
- src: '/images/photo.jpg'
- };
- const hash = 'abcd1234';
-
- // Générer le nom de fichier transformé en fonction du chemin du fichier, de la transformation et du hachage
- const filename = propsToFilename(filePath, transform, hash);
-
- console.log('Nom de fichier transformé généré :', filename);
- // Exemple de sortie : '/images/photo_abcd1234.png'
-}
-
-generateTransformedFilename();
-```
-
-### `hashTransform()`
-
-
- **Type :** `(transform: ImageTransform, imageService: string, propertiesToHash: string[]) => string`
-
-
-
-Transforme l'objet `transform` fourni en une chaîne de hachage basée sur les propriétés sélectionnées et le `imageService` spécifié.
-
-```ts
-
-import { hashTransform } from 'astro/assets/utils';
-
-function generateTransformHash() {
- const transform = {
- src: '/images/photo.jpg',
- width: 800,
- height: 600,
- format: 'jpg',
- };
-
- const imageService = 'astroImageService';
- const propertiesToHash = ['width', 'height', 'format'];
-
- // Générer le hachage en fonction de la transformation, du service d'image et des propriétés
- const hash = hashTransform(transform, imageService, propertiesToHash);
-
- console.log('Hachage de transformation généré :', hash);
- // Exemple de sortie : 'd41d8cd98f00b204e9800998ecf8427e'
-}
-
-generateTransformHash();
-```
diff --git a/src/content/docs/fr/reference/modules/astro-assets.mdx b/src/content/docs/fr/reference/modules/astro-assets.mdx
index 4c6f8ed2d93ca..0b8bae7ac7b50 100644
--- a/src/content/docs/fr/reference/modules/astro-assets.mdx
+++ b/src/content/docs/fr/reference/modules/astro-assets.mdx
@@ -5,7 +5,7 @@ sidebar:
i18nReady: true
tableOfContents:
minHeadingLevel: 2
- maxHeadingLevel: 6
+ maxHeadingLevel: 3
---
import Since from '~/components/Since.astro';
import ReadMore from '~/components/ReadMore.astro';
@@ -16,13 +16,17 @@ Astro fournit des composants intégrés et des fonctions d'aide pour optimiser e
## Importations depuis `astro:assets`
+Les utilitaires suivants sont importés depuis le module virtuel des ressources :
+
```js
import {
Image,
Picture,
getImage,
inferRemoteSize,
- } from 'astro:assets';
+ getConfiguredImageService,
+ imageConfig,
+} from 'astro:assets';
```
### ``
@@ -55,15 +59,13 @@ import monImage from "../assets/mon_image.png"; // Image a une résolution de 16
/>
```
-#### Propriétés d'Image
-
Le composant `` accepte les propriétés listées ci-dessous et les [propriétés d'image adaptatives](#propriétés-des-images-adaptatives) en plus de toutes les propriétés acceptées par la balise HTML `![]()
`.
-##### src (obligatoire)
+#### `src` (obligatoire)
-**Type :** `ImageMetadata | string | Promise<{ Par défault : ImageMetadata }>`
+**Type :** ImageMetadata | string | Promise\<\{ default: ImageMetadata \}\>
Le format de la valeur `src` de votre fichier image dépend de l'emplacement de votre fichier image :
@@ -106,7 +108,7 @@ Le format de la valeur `src` de votre fichier image dépend de l'emplacement de
/>
```
-##### alt (obligatoire)
+#### `alt` (obligatoire)
@@ -117,11 +119,11 @@ Utilisez l'attribut `alt` requis pour fournir un [texte alternatif descriptif](h
Si une image est simplement décorative (c'est-à-dire qu'elle ne contribue pas à la compréhension de la page), définissez `alt=""` pour que les lecteurs d'écran et autres technologies d'assistance sachent qu'il faut ignorer l'image.
-##### width et height (obligatoires pour les images dans `public/`)
+#### `width` et `height` (obligatoires pour les images dans `public/`)
-**Type :** `number | undefined`
+**Type :** ``number | `${number}` | undefined``
Ces propriétés définissent les dimensions à utiliser pour l'image.
@@ -132,7 +134,7 @@ Lorsque vous utilisez des images dans leur rapport hauteur/largeur d'origine, `w
Cependant, ces deux propriétés sont requises pour les images stockées dans votre dossier `public/` car Astro n'est pas en mesure d'analyser ces fichiers.
-##### densities
+#### `densities`
@@ -177,7 +179,7 @@ import monImage from '../assets/mon_image.png';
/>
```
-##### widths
+#### `widths`
@@ -195,7 +197,7 @@ Ne fournissez pas de valeur pour `densities` lorsque vous utilisez cette valeur.
Les largeurs supérieures à l'image d'origine seront ignorées pour éviter de mettre à l'échelle l'image.
-```astro
+```astro title="src/components/MonComposant.astro"
---
import { Image } from 'astro:assets';
import monImage from '../assets/mon_image.png'; // La résolution de l'image est de 1600x900
@@ -232,7 +234,7 @@ import monImage from '../assets/mon_image.png'; // La résolution de l'image est
/>
```
-##### sizes
+#### `sizes`
@@ -247,18 +249,18 @@ Les attributs `widths` et `sizes` seront automatiquement générés pour les ima
L'attribut `sizes` généré pour les images contraintes (`constrained`) et pleine largeur (`full-width`) suppose que l'image s'affiche presque sur toute la largeur de l'écran lorsque la fenêtre d'affichage est plus petite que la largeur de l'image. Si la différence est significative (par exemple, si l'image est affichée sur plusieurs colonnes sur un petit écran), vous devrez peut-être ajuster manuellement l'attribut `sizes` pour obtenir de meilleurs résultats.
-##### format
+#### `format`
-**Type :** `ImageOutputFormat | undefined`
+**Type :** ImageOutputFormat | undefined
Vous pouvez éventuellement indiquer le [type de fichier image](https://developer.mozilla.org/fr/docs/Web/Media/Formats/Image_types#types_de_fichiers_dimages_communs) de sortie à utiliser.
Par défaut, le composant `` produira un fichier `.webp`.
-##### quality
+#### `quality`
@@ -269,7 +271,7 @@ Par défaut, le composant `` produira un fichier `.webp`.
- un préréglage (`low`, `mid`, `high`, `max`) qui est automatiquement normalisé entre les formats.
- un nombre compris entre `0` et `100` (interprété différemment selon les formats).
-##### inferSize
+#### `inferSize`
@@ -293,7 +295,7 @@ import { Image } from 'astro:assets';
`inferSize` peut récupérer les dimensions d'une [image distante d'un domaine qui n'a pas été autorisé](/fr/guides/images/#autoriser-les-images-distantes), cependant l'image elle-même restera non traitée.
-##### priority
+#### `priority`
@@ -356,29 +358,27 @@ import monImage from "../assets/mon_image.png"; // La résolution de l'image est
```
-#### Propriétés de Picture
+`