মূলঃ React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style, লেখকঃ Nathan Sebhastian

React এর ইনলাইন CSS ব্যবহার করে backgroundImage স্টাইল প্রোপার্টি সেট করার চারটি পদ্ধতি রয়েছে।

এই টিউটোরিয়ালে আপনাকে চারটি পদ্ধতিই উদাহরণসহ দেখানো হবে।

এক্সটার্নাল URL ব্যবহার করে React এ ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনার কাঙ্খিত ইমাজটি যদি অনলাইনে থাকে তাহলে আপনি নিম্নোক্ত উপায়ে আপনার এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ সেট করতে পারবেনঃ

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}
এক্সটার্নাল URL ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ সেট করা

উপরোক্ত কোডটি background-image: url(https://via.placeholder.com/500) স্টাইল সহ একটি <div> রেন্ডার করবে।

/src ফোল্ডার থেকে React এ ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনি যদি Create React App ব্যবহার করে আপনার অ্যাপ্লিকেশনটি বুটস্ট্র্যাপ করে থাকেন এবং আপনার কাঙ্ক্ষিত ইমেজটি যদি src/ ফোল্ডারে থেকে থাকে, তাহলে আপনি ইমেজটিকে import করে আপনার এলিমেন্টের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে পারেনঃ

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;
ইম্পোর্টেড ইমেজ ব্যবহার করে ব্যাকগ্রাউন্ড সেট করা

আপনি npm start চালানোর পরে যদি ইমেজটি পাওয়া না যায় তাহলে React "Failed to Compile" এরর দেখাবে এবং বিল্ড প্রসেস বন্ধ করে দিবেঃ

React-failed-to-compile-image
React "Failed to Compile"। ইমেজটি পাওয়া যায় নি।

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

রিলেটিভ URL মেথডের মাধ্যমে React এ ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনার React অ্যাপলিকেশনে স্ট্যাটিক অ্যাসেট যুক্ত করার জন্য, Create React App এর public/ ফোল্ডারটি ব্যবহার করা যেতে পারে। এই ফোল্ডারে রাখা যেকোন ফাইল অনলাইনে অ্যাক্সেস করা যাবে।

আপনি যদি public/ ফোল্ডারের ভেতরে একটি image.png ফাইল রাখেন তাহলে ফালটি <your host address>/image.png URL এ অ্যাক্সেস করা যাবে। লোকাল কম্পিউটারে React চালানোর সময় ফাইলটি http://localhost:3000/image.png URL এ থাকবে।

এরপর ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য আপনি আপনার হোস্ট অ্যাড্রেসের সাথে রিলেটিভ URL টি অ্যাসাইন করে দিতে পারেন। এখানে একটি উদাহরণ দেওয়া হলঃ

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>
রিলেটিভ URL মেথডের মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ সেট করা

উপরোক্ত উদাহরণের মত URL পাথটি /image.png তে সেট করা হলে, ব্রাউজার <your host address>/image.png ইমেজটি খুঁজবে।

আপনি যদি আপনার ইমেজগুলিকে ফোল্ডারে সাজাতে চান তাহলে public/ ফোল্ডারের ভেতরে আরও ফোল্ডার তৈরি করতে পারেন। উদাহরণ স্বরূপঃ

Screen-Shot-2020-12-14-at-20.18.30
public/ ফোল্ডারের ভেতরে img/ ফোল্ডার তৈরি করা

ফোল্ডার তৈরি করার সিন্ধান্ত নিলে backgroundImage এর মান পরিবর্তন করে url(/img/image.png) করতে ভুলবেন না।

অ্যাবসলিউট URL মেথডের মাধ্যমে React এ ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনি চাইলে Create React App এর PUBLIC_URL এনভাইরনমেন্ট ভ্যারিয়েবলটিও ব্যবহার করতে পারেনঃ

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>
অ্যাবসলিউট URL মেথডের মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনি যখন এই কোডটি আপনার লোকাল কম্পিউটারে চালাবেন তখন React স্ক্রিপ্টগুলি PUBLIC_URL এর মান নির্ধারণ করে নিবে। লোকালি চালানোর সময় অ্যাবসলিউট URL টি দেখতে অনেকটা রিলেটিভ URL এর মতই লাগবেঃ

absolute-url-background-image-1
লোকাল কম্পিউটারে অ্যাবসলিউট URL দেখানো হয় না

যখন আপনি React অ্যাপটি প্রোডাকশন সার্ভারে ডেপ্লয় করবেন, কেবল তখনই অ্যাবসলিউট URL টি দেখা যাবে।

অ্যাডিশনাল প্রোপার্টিজ এর মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ সেট করা

আপনি যদি ব্যাকগ্রাউন্ড ইমেজটিকে আরও কাস্টমাইজ করতে চান তাহলে backgroundImage এর পরে অ্যাডিশনাল প্রোপার্টিজ যুক্ত করে তা করতে পারেন। উদাহরণ স্বরূপঃ

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>
অ্যাডিশনাল প্রোপার্টিজ এর মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ সেট করা

উপরোক্ত প্রোপার্টিগুলি <div> এলিমেন্টটিতে background-image স্টাইল এর সাথে background-repeat: no-repeat এবং width: 250px স্টাইলগুলি যুক্ত করবে।

আর্টিকেলটি পড়ার জন্য ধন্যবাদ, এবং আমি আশা করি আর্টিকেলটি আপনার কাজে এসেছে। আপনার যদি কোন প্রশ্ন থাকে তাহলে আমাকে টুইটারে খুঁজে নিতে পারেন। আমি সময়ে সময়ে আরও কিছু সংক্ষিপ্ত ডেভেলপার টিপস শেয়ার করব।