suruaat

टेलविंड स्टार्टर ब्लॉग में आउट-ऑफ-द-बॉक्स सपोर्ट है नेक्स्ट.जेएस का अंतर्निहित इमेज कंपोनेंट और स्वचालित रूप से मार्कडाउन या एमडीएक्स दस्तावेज़ों में डिफ़ॉल्ट इमेज टैग को इमेज कंपोनेंट प्रदान करने के लिए बदल देता है।

उपयोग

एक नए पेज रूट / जावास्क्रिप्ट फ़ाइल में उपयोग करने के लिए, बस इमेज कंपोनेंट को इम्पोर्ट करें और इसे कॉल करें, जैसे:

आयात छवि से 'next/image'

फ़ंक्शन घर() {
  वापसी (
    <>
      <h1>मेरा होमपेज</h1>
      <छवि src="/me.png" alt="लेखक की तस्वीर" चौड़ाई={500} ऊंचाई={500} />
      <p>स्वागत है मेरे होमपेज पर!</p>
    </>
  )
}

निर्यात default घर

एक मार्कडाउन फ़ाइल के लिए, डिफ़ॉल्ट छवि टैग का उपयोग किया जा सकता है और डिफ़ॉल्ट img टैग को इससे बदल दिया जाता है छवि बिल्ड प्रक्रिया में घटक।

मान लीजिए कि हमारे पास एक फ़ाइल है जिसका नाम है ocean.jpg में static/images/ocean.jpg, निम्नलिखित कोड लाइन अनुकूलित छवि उत्पन्न करेगी।

![ocean](/स्थिर/छवियाँ/ocean.jpg)

वैकल्पिक रूप से, चूंकि हम mdx का उपयोग कर रहे हैं, हम सीधे छवि घटक का उपयोग कर सकते हैं! ध्यान दें, कि आपको एक निश्चित चौड़ाई और ऊंचाई प्रदान करनी होगी। img टैग विधि आयामों को स्वचालित रूप से पार्स करती है।

<छवि alt="ocean" src="/static/images/ocean.jpg" चौड़ाई={256} ऊंचाई={128} />

ध्यान दें: यदि आप छवि को सहेजने का प्रयास करते हैं, तो यह webp प्रारूप में है, यदि आपका ब्राउज़र इसका समर्थन करता है!

द्वारा फोटो YUCAR FotoGrafik पर अनस्प्लैश

लाभ

• छोटी इमेज साइज़ वेबपी के साथ (~30% छोटी जेपीईजी से)
• रिस्पॉन्सिव इमेज - उपयोगकर्ता के व्यूपोर्ट के आधार पर सही इमेज साइज़ सर्व किया जाता है
• आलसी लोडिंग - छवियां तब लोड होती हैं जब उन्हें व्यूपोर्ट तक स्क्रॉल किया जाता है
• बचता है संचयी लेआउट शिफ्ट
• बिल्ड-टाइम के बजाय मांग पर अनुकूलन - बिल्ड समय में कोई वृद्धि नहीं!

सीमाएं

• इसकी निर्भरता के कारण next/image, जब तक कि आप Cloudinary या Imgix जैसे बाहरी छवि CDN का उपयोग नहीं कर रहे हों, Vercel का उपयोग होस्टिंग के लिए लगभग आवश्यक है। ऐसा इसलिए है क्योंकि घटक एक सर्वर रहित फ़ंक्शन की तरह काम करता है जो एक अत्यधिक अनुकूलित छवि CDN को कॉल करता है।

  यदि आप Vercel से बंधे नहीं रहना चाहते हैं, तो आप हटा सकते हैं imgToJsx में remarkPlugins में lib/mdx.js. यह डिफ़ॉल्ट को प्रतिस्थापित करने से बचाएगा img टैग।

  वैकल्पिक रूप से, कोई बिल्ड टाइम पर इमेज ऑप्टिमाइज़ेशन के सपोर्ट की प्रतीक्षा कर सकता है। एक अलग लाइब्रेरी, next-optimized-images ऐसा करता है, हालांकि इसके लिए छवियों को वेबपैक के माध्यम से बदलने की आवश्यकता होती है जो यहां नहीं किया गया है।

• बाहरी लिंक से छवियां पास नहीं की जाती हैं next/image

• सभी छवियों को इसमें संग्रहीत किया जाना चाहिए public फ़ोल्डर उदा /static/images/ocean.jpeg