Image

nsh يصدّر Image، وهو عنصر <Image> الذي يعرض الصور. وتستعلم الوحدة Image نفسها أيضًا من أداة تحميل الصور الأصلية عن الصور دون عرضها: أي عن حجمها، وعن تحميلها قبل عرضها.

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

Image مكوّن يحمل دالتين: <Image src=…> تعرض عنصر الصورة الأصلي (ينشئه المترجم في موضعه، كما يفعل مع <View>)، أما Image.getSize / Image.prefetch فتُستدعيان عليه مباشرة.

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

راجع الصور والأصول للاطلاع على الدليل.

#Image.getSize

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

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

تحمّل الصورة وتُنجَز بحجمها بالبكسل (حجم الصورة المصدر، لا نسخة مصغّرة منها؛ أما حجم SVG الأصلي فبالنقاط، وعلى الويب كما يقيسه المتصفح). وعند استيراد صورة لها متغيرات بكثافات بكسل مختلفة تحمّل الدالة المتغير الذي تحمّله العناصر على هذه الشاشة، وتُنجَز بحجم الملف المستورد أيًّا كان المتغير الذي حمّلته (أما <Image> التي تعرضها فتُبلغ عن بكسلات المتغير المحمَّل في onLoad). تبقى البايتات المحمّلة في الذاكرة، فلا ينزّلها <Image> الذي يعرضها بعد ذلك مرة أخرى. ويُرفَض الوعد إذا تعذّر تحميل الصورة.

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

تحمّل صورة قبل عرضها. تُنجَز عندما تصبح بايتاتها في الذاكرة، وتُرفَض مع الخطأ إذا تعذّر تحميل الصورة. وعند استيراد صورة لها متغيرات بكثافات بكسل مختلفة، تحمّل المتغير الذي تحمّله العناصر على هذه الشاشة. استخدمها للصفحة التالية في معرض صور، أو للصورة التي تظهر خلف نقرة.

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

#ذات صلة

• <Image>: src وplaceholder والنمط objectFit وonLoad وonProgress وonError وبقية الخصائص.
• استيراد ملف صورة (import logo from "./logo.png") يعطي ImageAsset ({ url, size, scales? }، بحجم محسوب بالنقاط) تقبله <Image src> وdrawImage الخاصة بالـ canvas.