Image

nsh exportiert Image, das <Image>-Element, das Bilder anzeigt. Dasselbe Image fragt außerdem den nativen Image Loader nach Bildern, ohne sie anzuzeigen: nach ihrer Größe und danach, sie zu laden, bevor sie angezeigt werden.

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

Image ist eine Komponente mit zwei Funktionen: <Image src=…> rendert die native Bildansicht (der Compiler erzeugt sie direkt an Ort und Stelle, wie er es auch bei <View> tut), und Image.getSize / Image.prefetch werden direkt darauf aufgerufen.

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

Den Leitfaden finden Sie unter Bilder und Assets.

#Image.getSize

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

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

Lädt das Bild und liefert dessen Größe in Pixeln (des Quellbilds, nicht einer herunterskalierten Kopie; bei einer SVG die intrinsische Größe in Punkten, im Web so, wie der Browser sie misst). Ein importiertes Bild mit Pixeldichte-Varianten lädt die Variante, die die Views auf diesem Bildschirm laden, und liefert die Größe der importierten Datei, unabhängig davon, welche Variante geladen wurde (ein <Image>, das es anzeigt, meldet die Pixel der geladenen Variante in onLoad). Die geladenen Bytes bleiben im Speicher, sodass das <Image>, das es als Nächstes anzeigt, es nicht erneut herunterlädt. Das Promise wird abgelehnt, wenn das Bild nicht geladen werden kann.

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>;

Lädt ein Bild, bevor es angezeigt wird. Das Promise wird aufgelöst, sobald die Bytes im Speicher liegen, und mit dem Fehler abgelehnt, wenn das Bild nicht geladen werden kann. Bei einem importierten Bild mit Pixeldichte-Varianten wird die Variante geladen, die die Views auf diesem Bildschirm laden. Verwenden Sie es für die nächste Seite einer Galerie oder das Bild hinter einem Tap.

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

#Siehe auch

• <Image>: src, placeholder, der Style objectFit, onLoad, onProgress, onError und die übrigen Props.
• Das Importieren einer Bilddatei (import logo from "./logo.png") liefert ein ImageAsset ({ url, size, scales? }, in Punkten dimensioniert), das <Image src> und Canvas-drawImage akzeptieren.