প্রতিক্রিয়া সহ ছবি আমদানি করা হচ্ছে

ভূমিকা

প্রতিক্রিয়া সহ ওয়েব অ্যাপ্লিকেশনগুলি বিকাশ করার সময়, আমরা সাধারণত ব্যবহারকারীদের আগ্রহ ক্যাপচার করার জন্য ভিজ্যুয়াল উপাদানগুলি অন্তর্ভুক্ত করতে চাই। এই ভিজ্যুয়াল উপাদানগুলি JPGs, PNGs, SVGs, GIF এবং আরও অনেকগুলি সহ যেকোন ধরণের চিত্র হতে পারে।

এই নিবন্ধে, আমরা শিখব কীভাবে প্রতিক্রিয়া দিয়ে ছবি আমদানি করতে হয় এবং বিভিন্ন উপায়ে এটি অর্জন করা যেতে পারে।

এক্সটার্নাল ইমেজ এবং লোকাল ইমেজ দুই ধরনের ইমেজ আমরা আমাদের রিঅ্যাক্ট অ্যাপ্লিকেশনে ব্যবহার করতে চাই। আমরা প্রাথমিকভাবে এই নিবন্ধে স্থানীয় ছবিগুলির সাথে উদ্বিগ্ন কারণ বহিরাগত চিত্রগুলির জন্য আমাদের সেগুলি আমদানি করার প্রয়োজন হয় না৷

বাহ্যিক চিত্রগুলি এমন চিত্র যা ইতিমধ্যে বাহ্যিকভাবে হোস্ট করা হয়েছে এবং যে কেউ একটি URL এর মাধ্যমে অ্যাক্সেস করতে পারে, যেখানে স্থানীয় চিত্রগুলি এমন চিত্র যা কেবল আমাদের স্থানীয় কম্পিউটার বা প্রকল্প ফোল্ডারে আমাদের কাছে উপলব্ধ এবং আমরা আমাদের অ্যাপ্লিকেশনে ব্যবহার করতে চাই৷

বাহ্যিকভাবে হোস্ট করা ছবিগুলি কীভাবে প্রদর্শন করবেন

কিভাবে ইমেজ ইমপোর্ট করা যায় তা নিয়ে যাওয়ার আগে, এটা বোঝা গুরুত্বপূর্ণ যে অন্যত্র হোস্ট করা ছবি একইভাবে কাজ করে যেভাবে আমরা সবসময় HTML-এ ছবি ব্যবহার করেছি – ইউআরএল যোগ করে src এর বৈশিষ্ট্য img ট্যাগ:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

আসুন এখন শিখি কিভাবে আমরা React এর মাধ্যমে (স্থানীয়) ছবি ইমপোর্ট করতে পারি!

প্রতিক্রিয়া সহ চিত্রগুলি কীভাবে আমদানি করবেন

বাহ্যিক চিত্রগুলি ছাড়াও, প্রতিক্রিয়াতে চিত্রগুলি যেভাবে ব্যবহার করা হয় তা অন্যান্য ফ্রেমওয়ার্ক বা এমনকি এইচটিএমএল থেকে উল্লেখযোগ্যভাবে আলাদা। আমাদের অ্যাপ্লিকেশনে ব্যবহার করার আগে এই ছবিগুলিকে প্রথমে প্রতিক্রিয়াতে আমদানি করতে হবে।

এটি দুটি উপায়ে সম্পন্ন করা যেতে পারে: ব্যবহার করে import বিবৃতি বা ব্যবহার করে require() ফাংশন আমরা উভয় পদ্ধতির উপর যেতে হবে.

কিভাবে প্রতিক্রিয়া ব্যবহার করে ইমেজ আমদানি করতে হয় আমদানি বিবৃতি

কারণ এটি পড়া এবং বোঝা সহজ, দ import স্টেটমেন্ট হল রিঅ্যাক্টে স্থানীয়ভাবে সঞ্চিত ছবি ইম্পোর্ট করার জন্য সবচেয়ে বেশি ব্যবহৃত পদ্ধতি। ছবি হিসাবে বিবেচনা করা হয় ডিফল্ট রপ্তানি, এবং যখন আমরা সেগুলি আমদানি করি, আমরা সেইভাবে করি যেভাবে আমরা উপাদানগুলি আমদানি করি। আমরা যে ইমেজ ইম্পোর্ট করছি সেটি ফাইল থেকে আপেক্ষিক পাথ নির্দিষ্ট করে এটি করা হয়:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

উপরের কোডে, আমরা এখনও ব্যবহার করি img ট্যাগ এবং src বৈশিষ্ট্য, কিন্তু এই সময় src attribute একটি স্ট্রিংয়ের পরিবর্তে একটি পরিবর্তনশীল গ্রহণ করে, যা JSX-এ কোঁকড়া বন্ধনী ব্যবহার করে পাস করা হয়।

বিঃদ্রঃ: আমরা যতগুলি ইমেজ ইমপোর্ট করতে চাই ততগুলি ইমেজ ইমপোর্ট করতে পারি, কিন্তু ইম্পোর্ট স্টেটমেন্টে প্রতিটি ইমেজের একটি ইউনিক নাম থাকতে হবে, অন্যথায় এটি একটি ত্রুটি ছুঁড়বে৷

ফাইলগুলির জন্য আপেক্ষিক পাথগুলি কীভাবে নির্দিষ্ট করা যায় এবং প্রাপ্ত করা যায় তা বোঝা গুরুত্বপূর্ণ; অন্যথায়, বাগ এবং ত্রুটি ঘটতে পারে। পূর্ববর্তী উদাহরণে, চিত্রটি একটিতে সংরক্ষণ করা হয়েছিল /src/images.

প্রয়োজন() ফাংশন ব্যবহার করে প্রতিক্রিয়া সহ চিত্রগুলি কীভাবে আমদানি করবেন

সার্জারির require() ফাংশন হল একটি Node.js ফাংশন যা বর্তমান ফাইল ব্যতীত অন্য ফাইল থেকে বাহ্যিক মডিউল অন্তর্ভুক্ত করতে ব্যবহৃত হয়। এটি হিসাবে একই ভাবে কাজ করে import বিবৃতি এবং আমাদের ছবি অন্তর্ভুক্ত করার অনুমতি দেয়:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

একমাত্র পার্থক্য হল প্রথম লাইন যেখানে আমরা ইমেজটিকে তার আপেক্ষিক পাথের মাধ্যমে প্রয়োজন এবং তারপর এটিকে একটি ভেরিয়েবলে সংরক্ষণ করেছি যা আমরা img কোঁকড়া ধনুর্বন্ধনী মাধ্যমে ট্যাগ.

আমরা এই ইনলাইনটি করার সিদ্ধান্ত নিতে পারি এবং একটি ভেরিয়েবলে ইমেজ বরাদ্দ করতে ব্যবহৃত অতিরিক্ত লাইন এড়াতে পারি, কারণ এটি বাধ্যতামূলক নয়:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

উপসংহার

আমরা শিখেছি কিভাবে ব্যবহার করে স্থানীয় ছবি আমদানি করতে হয় import বিবৃতি এবং require() এই নিবন্ধে ফাংশন.