আমি কীভাবে প্রতিক্রিয়ার কোনও স্থানীয় চিত্রকে উল্লেখ করব?

Question

আমি কীভাবে স্থানীয় ডিরেক্টরি থেকে চিত্র লোড করব এবং এটিকে reactjs img srcট্যাগ এ অন্তর্ভুক্ত করব ?

আমার একটি one.jpegউপাদান আমার উপাদান হিসাবে একই ফোল্ডারের ভিতরে কল করেছে এবং আমি উভয় <img src="one.jpeg" />এবং <img src={"one.jpeg"} />আমার renderফাংশনটির ভিতরে চেষ্টা করেছি তবে চিত্রটি প্রদর্শিত হয় না। এছাড়াও, webpack configসরকারী create-react-appকমান্ড লাইন ব্যবহারের সাথে প্রকল্পটি তৈরি হওয়ার পরে আমার কাছে ফাইল অ্যাক্সেস নেই ।

আপডেট: এটি কাজ করে যদি আমি প্রথমে চিত্রটি আমদানি করে import img from './one.jpeg'এটির ভিতরে ব্যবহার করি img src={img}তবে আমদানি করার জন্য আমার কাছে অনেকগুলি চিত্র ফাইল রয়েছে এবং তাই আমি সেগুলি ফর্মটিতে ব্যবহার করতে চাই img src={'image_name.jpeg'}।

Comments

প্রতিক্রিয়াটির

— ভানুয়ান

আরও দেখুন stackoverflow.com/questions/37644265/...

— Vanuan

আমার আসলে একই রকম সমস্যা রয়েছে, আমার চিত্রটি সূচি.জেএসএক্স ফাইলটিতে আমদানি করা হয়েছে, আমার ওয়েবপ্যাকে লোডার রয়েছে, কম্পাইল মুখটি ঠিকঠাক কাজ করছে, প্রকৃতপক্ষে চিত্রটির একটি অনুলিপি আমার সার্ভার / পাবলিক / জেএসে তৈরি করা হয়েছে একটি এলোমেলো সংখ্যার ফোল্ডার এবং এটির সঠিক পথটি বান্ডেলের মধ্যে রয়েছে তবে আমি চিত্রটি কল্পনা করতে পারি না। এটিও আশ্চর্যের বিষয় যে এটি সার্ভার / পাবলিক / জেএসে উত্পাদিত হয়েছে এবং সার্ভার / পাবলিক / আইএমজি নয় যেমন আমি সূচক.জেজে লিখেছি

— কারমিন টাম্বাসিয়া

Answer 1

সবার আগে এসআরসি-র মোড়ক করুন {}

তারপরে যদি ওয়েবপ্যাক ব্যবহার করা হয়; পরিবর্তে: <img src={"./logo.jpeg"} />

আপনার প্রয়োজনের প্রয়োজন হতে পারে:

<img src={require('./logo.jpeg')} />

---

অন্য বিকল্পটি হ'ল প্রথমে চিত্রটি আমদানি করতে হবে:

import logo from './logo.jpeg'; // with import

বা ...

const logo = require('./logo.jpeg); // with require

তারপরে এটি প্লাগ করুন ...

<img src={logo} />

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

Comments

.আপেক্ষিক ইউআরএলটির শুরুতে ভুলে যাবেন না সেদিকে খেয়াল রাখুন। হওয়া উচিত<img src={require('./one.jpeg')} />

— নুহমান

এই পদ্ধতিগুলির মধ্যে কোনও চিত্রের লোড সময় মত কর্মক্ষমতা প্রভাবিত করে? যদি তা হয় তবে কোনটি পারফরম্যান্সের চেয়ে ভাল?

— ইনাম উর রেহমান

@ انعامالرحمن - এখানে কিছু মন্তব্য stackoverflow.com/questions/31354559/... কিন্তু টি এল; ডিআর নেই, কোন কর্মক্ষমতা পার্থক্য।

— অ্যাপসওয়াক

কমপক্ষে ওয়েবপ্যাক 4 এর সাথে, এই ব্যবহারটি লোডারটি ফাইলের এক বা আগেরটির পরিবর্তে ইউআরএল-লোডার

— হ'ল

Answer 2

সবচেয়ে ভাল উপায় হ'ল প্রথমে চিত্রটি আমদানি করা এবং তারপরে এটি ব্যবহার করুন।

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

Comments

কেন এটি সেরা উপায়?

— জেসন লিচ

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

— আর্সলান

জেসন লিচ এটি পরিষ্কার উপায়ে

— আর্সলান শাকুর

Answer 3

এর মধ্যে আপনাকে চিত্রের উত্সের পথটি মোড়ানো দরকার {}

<img src={'path/to/one.jpeg'} />

আপনি requireযদি ব্যবহার করা প্রয়োজনwebpack

<img src={require('path/to/one.jpeg')} />

Answer 4

পাবলিক ফোল্ডারের অভ্যন্তরে কোনও সম্পদ ফোল্ডার তৈরি করুন এবং সে অনুযায়ী চিত্রের পথ রাখুন।

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

Comments

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

— সাবস্টিয়ান দে

Answer 5

আমদানি চিত্রের জন্য সর্বোত্তম উপায় হ'ল ...

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

Comments

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

— এসসিআর

@toing_toing আপনি চিত্রগুলিকে এসআরসি-তে রাখার পরামর্শ দিচ্ছেন না কেন? অফিসিয়াল ডকুমেন্টেশনের উদাহরণ রয়েছে যেখানে এই ঘটনাটি রয়েছে: ফেসবুক.

— github.io/create-react-app/docs/…

ওয়েবপ্যাক বান্ডিল এবং সংকলনের সময়ের আকার বাড়ে, আপনি যখন কোনও সম্পদ পরিবর্তন করেন এবং লোডিংয়ের সময় বৃদ্ধি করেন তখন প্রতিবার সংকলন করা দরকার। আমি বরং এটি পাবলিক ফোল্ডারে এবং ইউআরএল দ্বারা লিঙ্ক করব।

— টোয়িং_টোয়িং

@toing_toing আপনি বলছেন আপনি বরং '....' বলছেন তবে কীভাবে এটি করবেন আপনি বলবেন না।

— থমাস জে রাশ 21

Answer 6

আপনার এটি করার দুটি উপায় আছে।

প্রথম

ক্লাসের উপরে চিত্রটি আমদানি করুন এবং তারপরে এটি আপনার <img/>উপাদানটিতে রেফারেন্স করুন

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

দ্বিতীয়

আপনি require('../pathToImh/img')এ জাতীয় <img/>উপাদান ব্যবহার করে সরাসরি চিত্রের নির্দিষ্ট করতে পারেন

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

Answer 7

আমার উত্তরটি মূলত রুজেনের মতোই similar আমি ইমেজটি অবজেক্ট ভ্যালু, বিটিডব্লু হিসাবে ব্যবহার করি। দুটি সংস্করণ আমার জন্য কাজ করে:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

অথবা

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

মোড়ক ছাড়াই - তবে এটিও আলাদা অ্যাপ্লিকেশন।

আমি "আমদানি" সমাধানও পরীক্ষা করে দেখেছি এবং কয়েকটি ক্ষেত্রে এটি কাজ করে (যা অবাক করার মতো নয়, এটি প্রতিক্রিয়াতে App.js প্যাটার্নে প্রয়োগ করা হয়), তবে উপরের হিসাবে আমার ক্ষেত্রে নয়।

Answer 8

আমি এটি প্রয়োগের জন্য অন্য একটি উপায় খুঁজে পেয়েছি (এটি একটি কার্যকরী উপাদান):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

আশা করি এটা সাহায্য করবে!

Answer 9

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

Answer 10

আমি এইভাবে ব্যবহার করেছি, এবং এটি কার্যকর হয় ... আমি আশা করি আপনি দরকারী।

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

Answer 11

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

ডিফল্ট ইমেজ রফতানি করুন

Answer 12

কিছু মন্তব্যে উল্লিখিত হিসাবে, আপনি ছবিগুলি সর্বজনীন ফোল্ডারে রাখতে পারেন। এটি তৈরি করুন-প্রতিক্রিয়া-অ্যাপ্লিকেশন এর ডক্সেও ব্যাখ্যা করা হয়েছে: https://create-react-app.dev/docs/using-the-public-folder/

Comments

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

— ডক্সে