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

गाइड के लिए Images and assets देखें।

#Image.getSize

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

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

इमेज को लोड करता है और उसका आकार पिक्सेल में लेकर resolve होता है (स्रोत इमेज का आकार, न कि डाउनसैंपल की गई कॉपी का; SVG का इंट्रिंसिक आकार पॉइंट्स में, वेब पर वैसे जैसे ब्राउज़र उसे मापता है)। पिक्सेल-डेंसिटी वैरिएंट वाली इंपोर्ट की गई इमेज के लिए, यह वही वैरिएंट लोड करता है जो व्यू इस स्क्रीन पर लोड करते हैं, और इंपोर्ट की गई फ़ाइल के आकार के साथ resolve होता है, चाहे उसने कोई भी वैरिएंट लोड किया हो (उसे दिखाने वाला <Image> onLoad में लोड किए गए वैरिएंट के पिक्सेल रिपोर्ट करता है)। लोड किए गए बाइट्स मेमोरी में रहते हैं, इसलिए उसे अगला दिखाने वाला <Image> उसे दोबारा डाउनलोड नहीं करता। अगर इमेज लोड नहीं हो पाती, तो promise reject हो जाता है।

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

इमेज को दिखाने से पहले ही लोड कर लेता है। जैसे ही उसके बाइट्स मेमोरी में आ जाते हैं, resolve हो जाता है, और इमेज लोड न हो पाने पर एरर के साथ reject हो जाता है। पिक्सेल-डेंसिटी वैरिएंट वाली इंपोर्ट की गई इमेज के लिए, यह वही वैरिएंट लोड करता है जो व्यू इस स्क्रीन पर लोड करते हैं। इसका उपयोग गैलरी के अगले पेज या टैप के पीछे मौजूद इमेज के लिए करें।

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

#Related

• <Image>: src, placeholder, objectFit स्टाइल, onLoad, onProgress, onError और अन्य props।
• इमेज फ़ाइल को इंपोर्ट करने (import logo from "./logo.png") पर एक ImageAsset ({ url, size, scales? }, पॉइंट्स में आकार वाला) मिलता है, जिसे <Image src> और कैनवास drawImage स्वीकार करते हैं।