Image

nsh exporte Image, l’élément <Image> qui affiche des images. Le même Image permet aussi d’interroger le chargeur d’images natif sur des images sans les afficher : connaître leur taille, et les charger avant de les afficher.

import { Image, type PixelSize } from "nsh";

Image est un composant qui porte deux fonctions : <Image src=…> affiche la vue d’image native (le compilateur la crée sur place, comme il le fait pour <View>), et Image.getSize / Image.prefetch sont appelées directement sur celui-ci.

const Image: ((props: ImageProps) => JSX.Element) & {
  getSize(src: string | ImageAsset): Promise<PixelSize>;
  prefetch(src: string | ImageAsset): Promise<void>;
};

Voir Images et ressources pour le guide.

#Image.getSize

getSize(src: string | ImageAsset): Promise<PixelSize>;

interface PixelSize {
  width: number;   // pixels (an SVG's: points)
  height: number;
}

Charge l’image et se résout avec sa taille en pixels (celle de l’image source, et non d’une copie réduite ; pour un SVG, sa taille intrinsèque en points, sur le web telle que le navigateur la mesure). Une image importée avec des variantes de densité de pixels charge la variante que les vues chargent sur cet écran et se résout avec la taille du fichier importé, quelle que soit la variante chargée (un <Image> qui l’affiche indique dans onLoad les pixels de la variante chargée). Les octets chargés restent en mémoire, de sorte que le <Image> qui l’affiche ensuite ne la télécharge pas de nouveau. La promesse est rejetée si l’image ne peut pas être chargée.

import { Image, signal } from "nsh";

const url = "https://picsum.photos/seed/nsh/1200/800";
const ratio = signal(1);

Image.getSize(url).then(({ width, height }) => ratio.set(width / height));

<Image src={url} style={{ width: "100%", aspectRatio: ratio() }} />;

#Image.prefetch

prefetch(src: string | ImageAsset): Promise<void>;

Charge une image avant de l’afficher. Se résout dès que ses octets sont en mémoire, et est rejetée avec l’erreur lorsque l’image ne peut pas être chargée. Pour une image importée avec des variantes de densité de pixels, elle charge la variante que les vues chargent sur cet écran. Utilisez-la pour la page suivante d’une galerie ou pour l’image située derrière un appui.

const next = photos.slice(index + 1, index + 4);
next.forEach((p) => Image.prefetch(p.url).catch(() => {})); // the <Image> reports its own error later

#Voir aussi

• <Image> : src, placeholder, le style objectFit, onLoad, onProgress, onError et les autres props.
• L’importation d’un fichier image (import logo from "./logo.png") fournit un ImageAsset ({ url, size, scales? }, dimensionné en points) que <Image src> et drawImage de canvas acceptent.