React.js এ img এর জন্য সঠিক পথ

Question

আমার প্রতিক্রিয়া প্রকল্পে আমার ছবিগুলির সাথে কিছু সমস্যা আছে। প্রকৃতপক্ষে আমি সবসময়ই ভেবেছিলাম যে ফাইলগুলি আর্কিটেকচারে এসসিআর অ্যাট্রিবিউটের আপেক্ষিক পথটি নির্মিত হয়েছিল

এখানে আমার ফাইল আর্কিটেকচার:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

তবে আমি বুঝতে পেরেছি যে url এর উপরে নির্মিত built আমার উপাদানগুলির একটিতে (উদাহরণস্বরূপ file1.jsx এ) আমার এটি রয়েছে:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

কীভাবে এই সমস্যার সমাধান সম্ভব? আমি চাই যে প্রতিক্রিয়া-রাউটার দ্বারা পরিচালিত কোনও রূপের রুটে, সমস্ত চিত্র একই পথ দিয়ে প্রদর্শিত হতে পারে।

Comments

শুধু চিত্রটিতে সরাসরি নির্দেশ করুন, ব্যবহার করবেন না

— .. /

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

— আজ

আশা করি এই উত্তরটি আপনাকে স্থানীয় চিত্রগুলি প্রতিক্রিয়া

— জানাতে

Answer 1

আপনি একটি আপেক্ষিক url ব্যবহার করছেন, যা বর্তমান ইউআরএল সম্পর্কিত, ফাইল সিস্টেম নয়। আপনি নিখুঁত url ব্যবহার করে এটি সমাধান করতে পারেন

<img src ="http://localhost:3000/details/img/myImage.png" />

আপনি যখন www.my-domain.bike বা অন্য কোনও সাইটে নিযুক্ত করেন তখন এটি দুর্দান্ত নয়। সাইটের রুট ডিরেক্টরি সম্পর্কিত একটি ইউআরএল ব্যবহার করা ভাল

<img src="/details/img/myImage.png" />

Comments

ধন্যবাদ, আমি /সেই পূর্ববর্তীগুলিকে details(বনাম ./detailsইত্যাদি) জোর দিয়ে বলব অন্যদের মধ্যে যারা দুজনের মধ্যে সংঘাত সৃষ্টি করতে পারে)।

— ব্যবহারকারী 1322092

এমনকি আমার জন্য এটি কাজ করে না। আমি এসিলিন্টের reactjsসাথে ব্যবহার করছি cordovaএবং ব্যবহার ES5করছি

— জিমিত প্যাটেল

এই এবং ক্লেরিব্লানির উভয়ই সমাধানের কাজ করার সময় ক্লেয়ারাব্লানিরাই হ'ল ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ ডক্সের পরামর্শ দেয়। তারা জনসাধারণের ফেসবুক.

— আথির নুয়াইম

@ ব্যবহারকারী 1322092 সঠিক। মনে আছে এটি /images/popcorn.pngএবং না ./images/popcorn.png। সমস্ত রুট এবং স্টাফ সহ আমার জন্য কাজ করেছেন।

— নুহমান

Answer 2

ইন create-react-appইমেজ জন্য আপেক্ষিক পাথ কাজ বলে মনে হচ্ছে না। পরিবর্তে, আপনি একটি চিত্র আমদানি করতে পারেন:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Comments

গতিশীল চিত্রগুলি সম্পর্কে কী বলা যায়, উদাহরণস্বরূপ, জেসন ফাইলে তৈরি করা, প্রতিক্রিয়া-অ্যাপ্লিকেশনটিতে?

— জোক

@ জোক আমি মনে করি আপনি JSON ফাইল থেকে ভেরিয়েবলটি রফতানি করবেন, ভেরিয়েবলটি আপনার উপাদানটিতে আমদানি করবেন। তারপরে আপনি যথারীতি এটি উল্লেখ করতে পারেন। উদাহরণস্বরূপ রফতানি প্রতিস্থাপন my_src = পরিবর্তনশীল_ এখানে, my_file থেকে {my_src} এবং src = {my_src} আমদানি করুন}

— ক্লেলেবলানি

import './styles/style.less'; **import logo from './styles/images/deadline.png';**চিত্রের উপস্থিতি ও পথটি সঠিক থাকার সময় আমি দ্বিতীয় লাইন মডিউলটিতে ত্রুটি পাচ্ছি।

— হিতেন্দ্র

এই পদ্ধতি আরো দ্বারা নিশ্চিত করা হয় survive.js আপনি কোর webpack লেখকের পদ্ধতি এক কটাক্ষপাত করা চাই। তিনি উল্লেখ করেছেন যে আপনি প্রতিবার কোনও ইমেজ রেফারেন্সের সময় প্রতিচ্ছবিটি আমদানি করতে বাবেল-প্লাগইন-ট্রান্সফর্ম-রিএ্যাক্ট-জেএসএক্স-ইমগ-আমদানি ব্যবহার করতে পারেন।

— আন্দ্রে

এটি নয়, এটি কেবল চিত্রের ইস্যু সমাধান করে তবে পথের সমস্যার সমাধান করে না ... ডিমা গার্সম্যানের উত্তর হ'ল কোনও ফাইলের ইমগ বা অন্য কোনও পথের জন্য আসল প্রতিক্রিয়া সমাধান

— সামি

Answer 3

আপনি যদি নিজের প্রকল্পটি তৈরি করতে তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করেন তবে আপনার সর্বজনীন ফোল্ডারটি অ্যাক্সেসযোগ্য। সুতরাং আপনাকে আপনার imageফোল্ডারটিকে সর্বজনীন ফোল্ডারের ভিতরে যুক্ত করতে হবে ।

পাবলিক / ছবি /

<img src="/images/logo.png" />

Comments

আমি একটি প্রশ্ন জিজ্ঞাসা করতে চলেছিলাম কিন্তু এই উত্তরটি আমার সমস্যা সমাধান করেছে !!! উত্তর হিসাবে চিহ্নিত করা উচিত। ধন্যবাদ !!! +1

— Si8

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

— awasik

পরিস্থিতিগুলি চিকিত্সা করার জন্য এটি একটি দ্রুত উপায়, তবে আপনার যদি আপেক্ষিক ইউআরএলগুলির প্রয়োজন না হয় তবে এটি কাজ করবে। উদাহরণস্বরূপ, আপনি যদি আপনার অ্যাপ্লিকেশনটি পরিবেশন করেন www.example.com/react-appতবে পাবলিক ফোল্ডারটি www.example.com এ ছাড়াই প্রকাশ করা হবে react-app। এটি ঝামেলা হতে পারে, তাই গৃহীত উত্তরটি সঠিক। উত্স: সম্পদ যুক্ত করা এবং সর্বজনীন ফোল্ডার ব্যবহার

— আলেকজান্দ্রু পিরভু

Answer 4

সঙ্গে create-react-appআছে প্রকাশ্য ফোল্ডারে (সঙ্গে index.html ...)। আপনি যদি সেখানে "myImage.png" রাখেন তবে img সাব-ফোল্ডারটির অধীনে বলুন , তবে আপনি সেগুলি এর মাধ্যমে অ্যাক্সেস করতে পারবেন:

<img src={window.location.origin + '/img/myImage.png'} />

Comments

এটি সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত, কারণ এটি আসলে কোনও ফাইলের সমস্ত ধরণের পাথের জন্য প্রতিক্রিয়া সমাধান

— সামি

আপনি কেন এটি সঠিক উত্তর মনে করেন তা আমি বুঝতে পারি না। আমি এই উত্তরটি এবং ক্লেলেব্লানীর উত্তর এবং ক্লেয়ারের উত্তরটি চেষ্টা করেছিলাম যখন এটি হয়নি। চিত্রটি সর্বজনীন ফোল্ডারে থাকলে এই উত্তরটি কেবল কার্যকর হয়। আমার ছবিগুলি কি সর্বজনীন ফোল্ডারে যেতে হবে? @Sami

— Maderas

হ্যাঁ @ মাদারাসের প্রথম জিনিসটি হ'ল এই উত্তরটি স্বীকৃত এক => সবেমাত্র removing removing এবং বেস ইউআরএল সরিয়ে আপনি একইভাবে src = '/ চিত্রের আপেক্ষিক পথ' বা src = 'চিত্রের পরম পথ' ব্যবহার করতে পারেন এর মধ্যে একই রকম উত্তরটি হ'ল এটি কোনও চিত্রের জন্য পরিবর্তনশীল পথের সামঞ্জস্য করে

— সামি

এখনও অবধি আমার জন্য কবজির মতো কাজ করে। আর কিছু করেনি! এবং আমি সবকিছু সম্পর্কে চেষ্টা করেছি। ধন্যবাদ!

— মারিয়া ক্যাম্পবেল

Answer 5

1. Src এর মধ্যে একটি চিত্র ফোল্ডার তৈরি করুন (/ src / চিত্র) এবং এতে আপনার চিত্রটি রাখুন। তারপরে এই চিত্রটি আপনার উপাদানটিতে আমদানি করুন (আপনার আপেক্ষিক পথটি ব্যবহার করুন)। নীচের মত-

   import imageSrc from './images/image-name.jpg';

   এবং তারপর আপনার উপাদান।

   <img title="my-img" src={imageSrc} alt="my-img" />

2. আর একটি উপায় হ'ল চিত্রগুলি সর্বজনীন ফোল্ডারে রাখা এবং আপেক্ষিক পথ ব্যবহার করে সেগুলি আমদানি করা। এর জন্য সর্বজনীন ফোল্ডারে একটি চিত্র ফোল্ডার তৈরি করুন এবং এতে আপনার চিত্রটি রাখুন। এবং তারপরে আপনার উপাদানটিতে এটি নীচের মতো ব্যবহার করুন।

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   উভয় পদ্ধতি কাজ করে তবে প্রথমটি কার্যকর করা হয় কারণ এর ক্লিনার উপায় এবং চিত্রগুলি নির্মাণের সময় ওয়েবপ্যাক দ্বারা পরিচালিত হয়।

Comments

এটি আমাকে সাহায্য করেছিল :)

— রাফেল

এটি কাজ করবে না, প্রাসঙ্গিক পথটি সূচিত করার জন্য শুরুতে একটি স্ল্যাশ (/) প্রয়োজন যেমন: "/images/pitbull-mark.png"

— জেরেমি রে

আপনি কি উত্তরে বর্ণিতটির চেষ্টা করেছেন? এটিও কাজ করা উচিত।

— মোস্তকিম কে

Answer 6

আমার ক্ষেত্রে নিম্নলিখিত কোডগুলিও কাজ করে।

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Comments

এটা আমার জন্য কাজ করেছে। আপনি যেসব চিত্র পাবলিক ফোল্ডারে রাখতে চান না

— Mr_LinDowsMac

Answer 7

কিছু পুরানো উত্তর কাজ করে না, অন্যরা ভাল তবে থিমটি ব্যাখ্যা করবে না, সংক্ষেপে:

চিত্রটি যদি 'সর্বজনীন' ডিরেক্টরিতে থাকে

উদাহরণ: \public\charts\a.png

এইচটিএমএলে:

<img id="imglogo" src="/charts/logo.svg" />

জাভাস্ক্রিপ্টে:

গতিশীলভাবে নতুন img এ চিত্র তৈরি করুন:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

গতিশীলভাবে আইডিকে আইডি সহ বিদ্যমান ইমগে চিত্র সেট করুন:

document.getElementById('img1').src = 'charts/a.png';

যদি চিত্রটি 'src' ডিরেক্টরিতে থাকে:

উদাহরণ: \src\logo.svg

জাভাস্ক্রিপ্টে:

import logo from './logo.svg';  
img1.src = logo;  

জেএসএক্সে:

<img src={logo} /> 

Answer 8

এর মতো অফিসিয়াল ব্যবহারের নির্দেশনা অনুযায়ী ওয়েবপ্যাক.কনফিগ.জেএস -তে ফাইল-লোডার এনপিএম যুক্ত করা:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

আমার জন্য কাজ।

Answer 9

আপনার উপাদানগুলিতে চিত্রগুলি আমদানি করুন

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

এবং চিত্রের উপর চিত্রটির নাম src = {সাম্প্রতিকপ্রজেক্টমিজ্যাজ _3 a একটি অবজেক্ট হিসাবে কল করুন

 <Img src={RecentProjectImage_3} alt="" />

Answer 10

একজন বন্ধু আমাকে দেখিয়েছিলেন কীভাবে এটি করা যায়:

"./" কাজ করে যখন ফাইলটির অনুরোধ করা ফাইলটি (উদাহরণস্বরূপ, "উদাহরণ.js") ফোল্ডার গাছের কাঠামোর মধ্যে ফোল্ডার "চিত্রগুলি" হিসাবে একই স্তরে থাকে।

Answer 11

আপনার সর্বজনীন ফোল্ডারে লোগোটিকে যেমন সর্বজনীন / img / logo.png এর অধীনে রাখুন এবং তারপরে পাবলিক ফোল্ডারটিকে% PUBLIC_URL% হিসাবে উল্লেখ করুন:

<img src="%PUBLIC_URL%/img/logo.png"/>

উপরের% PUBLIC_URL% এর ব্যবহারটি publicতৈরির সময় ফোল্ডারের URL টি দিয়ে প্রতিস্থাপন করা হবে । publicএইচডিএমএল থেকে কেবল ফোল্ডারের ভিতরে থাকা ফাইলগুলিই উল্লেখ করা যেতে পারে।

"/Img/logo.png" বা "logo.png" এর বিপরীতে, "% PUBLIC_URL% / img / logo.png" ক্লায়েন্ট-পার্শ্ব রাউটিং এবং একটি অ-রুট পাবলিক URL উভয়ই সঠিকভাবে কাজ করবে। চালিয়ে কীভাবে একটি নন-রুট পাবলিক URL কনফিগার করতে হয় তা শিখুন npm run build।