ReactJS এবং ইমেজগুলি সর্বজনীন ফোল্ডারে

Question 1

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

কোন ধারনা ?

সম্পাদনা

আমি বটম.জেএস বা হেডার.জেএস এর মধ্যে একটি চিত্র আমদানি করতে চাই

কাঠামো ফোল্ডারটি হ'ল:

আমি ওয়েবপ্যাক ব্যবহার করি না। আমি কি ?

সম্পাদনা 2

আমি চিত্রগুলি এবং বাকি সম্পদগুলি লোড করার জন্য ওয়েবপ্যাকটি ব্যবহার করতে চাই। সুতরাং আমার কনফিগার ফোল্ডারে আমার পরবর্তী ফাইলগুলি রয়েছে:

আমি কোথায় ইমেজগুলির পাথ যুক্ত করতে হবে এবং কীভাবে?

ধন্যবাদ

Question 2

জনসমক্ষে চিত্রগুলির রেফারেন্স দেওয়ার জন্য দুটি উপায় আছে আমি জানি কীভাবে এটি সরাসরি করা যায়। একজন হোমাম বাহরানী থেকে উপরের মতো।

ব্যবহার

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

এবং যেহেতু এটি কাজ করে আপনার সত্যিকারের আর কোনও প্রয়োজন নেই তবে, এটিও কাজ করে ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Question 3

এর জন্য আপনার কোনও ওয়েবপ্যাক কনফিগারেশন লাগবে না ..

আপনার উপাদানটিতে কেবল চিত্রের পথ দিন। ডিফল্টরূপে প্রতিক্রিয়াটি এটি সর্বজনীন ডিরেক্টরিতে জানবে।

<img src="/image.jpg" alt="image" />

Question 4

প্রতিক্রিয়া দস্তাবেজগুলি ডকুমেন্টেশনে এটিকে সুন্দরভাবে ব্যাখ্যা করে, আপনাকে process.env.PUBLIC_URLপাবলিক ফোল্ডারে রাখা চিত্রগুলি ব্যবহার করতে হবে । আরও তথ্যের জন্য এখানে দেখুন

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Question 5

1- কনফিগারেশনের জন্য ওয়েবপ্যাকটি ব্যবহার করা ভাল তবে আপনি কেবল চিত্রের পথটি ব্যবহার করতে পারেন এবং প্রতিক্রিয়া জানাতে পারে যে এটি পাবলিক ডিরেক্টরিতে রয়েছে।

<img src="/image.jpg">

2- আপনি যদি ওয়েবপ্যাকটি ব্যবহার করতে চান যা প্রতিক্রিয়াটির একটি স্ট্যান্ডার্ড অনুশীলন। আপনি এই নিয়মগুলি আপনার ওয়েবপ্যাক.কনফিগ.দেভ.জেএস ফাইলটিতে ব্যবহার করতে পারেন।

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

তারপরে আপনি প্রতিক্রিয়া উপাদানগুলিতে চিত্র ফাইলটি আমদানি করতে এবং এটি ব্যবহার করতে পারেন।

import image from '../../public/images/logofooter.png'

<img src={image}/>

Question 6

আমরা জানি প্রতিক্রিয়াটি এসপিএ। জেএসএক্স থেকে উপযুক্ত এইচটিএমএল প্রসারিত করে রুট উপাদান থেকে সবকিছু রেন্ডার করা হয়।

সুতরাং আপনি ইমেজগুলি কোথায় ব্যবহার করতে চান তা বিবেচ্য নয়। সর্বোত্তম অনুশীলন হ'ল একটি নিখুঁত পাথ ব্যবহার করা (জনসাধারণের উল্লেখ সহ)। আপেক্ষিক পথ সম্পর্কে চিন্তা করবেন না।

আপনার ক্ষেত্রে, এটি সর্বত্র কাজ করা উচিত:

"./images/logofooter.png"

Question 7

আপনার জীবন আরও সহজ করতে আপনার এখানে ওয়েবপ্যাক ব্যবহার করা উচিত। আপনার কনফিগারেশনে নীচে বিধি যুক্ত করুন:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

এর পরে, আপনি কেবল আপনার প্রতিক্রিয়া উপাদানগুলিতে চিত্রগুলি আমদানি করতে পারেন:

import myImage from 'publicfolder/images/Image1.png'

নীচের মত মাই ইমেজ ব্যবহার করুন:

<div><img src={myImage}/></div>

অথবা যদি চিত্রটি স্থানীয় উপাদানগুলির মধ্যে আমদানি করা হয়

<div><img src={this.state.myImage}/></div>