reactjs - tutorial - react native




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

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

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

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


আপনাকে চিত্রের উত্সের পথটি আপনাকে {} w এর মধ্যে আবৃত করতে হবে

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

webpack ব্যবহার করা হলে আপনাকে প্রয়োজন ব্যবহার করতে হবে

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

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

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>
    );
  }
}

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

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

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

প্রথমে rc the এ src মোড়ানো

তারপরে যদি ওয়েবপ্যাক ব্যবহার করা হয়; এর পরিবর্তে: <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} />

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


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

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

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}/>
   );
  }
}

ডিফল্ট চিত্র রফতানি করুন





reactjs