मैं प्रतिक्रिया में स्थानीय छवि का संदर्भ कैसे दूं?

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/…

— वानुआन

मेरे पास वास्तव में एक समान मुद्दा है, मेरी छवि को index.jsx फ़ाइल में आयात किया गया है, मेरे पास वेबपैक में लोडर हैं, संकलन चेहरा ठीक काम कर रहा है, जैसा कि वास्तव में छवि की एक प्रति मेरे सर्वर / सार्वजनिक / js में बनाई गई है एक यादृच्छिक संख्या के साथ फ़ोल्डर, और इसके लिए सही रास्ता बंडल में है, लेकिन मैं छवि की कल्पना नहीं कर सकता। यह भी अजीब है कि इसका सर्वर / सार्वजनिक / js में उत्पादन किया गया है न कि सर्वर / सार्वजनिक / img जैसा कि मैंने index.js में लिखा है

— कारमाइन टैम्बस्किया

Answer 1

सबसे पहले src in में रैप करें {}

तब अगर वेबपैक का उपयोग किया जाता है; के बजाय: <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

ध्यान रखें .कि रिश्तेदार url की शुरुआत में भूल न जाएं । होना चाहिए<img src={require('./one.jpeg')} />

— नाहमन

क्या इनमें से कोई भी विधि छवि के लोडिंग समय जैसे प्रदर्शन को प्रभावित करती है? यदि हां, तो कौन सा प्रदर्शन बेहतर है?

— इनाम उर रहमान

@ انعامالرحمٰن - यहाँ पर कुछ टिप्पणियाँ stackoverflow.com/questions/31354559/… लेकिन TL; DR कोई प्रदर्शन अंतर नहीं है।

— अप्सवाक

यहां यह तथ्य याद आ रहा है कि कम से कम वेबपैक 4 के साथ, लोडर का उपयोग करने के लिए फ़ाइल एक या पिछले के बजाय

— url-

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

यह सबसे अच्छा तरीका क्यों है?

— जेसन लीच

यह सबसे अच्छा तरीका है यदि आपको एक ही घटक में पुन: उपयोग करने की आवश्यकता है, तो आप इसे पथ संदर्भ के बिना उपयोग कर सकते हैं। यह एक अच्छा अभ्यास है @JasonLeach

— Arslan shakoor

जेसन लीच यह क्लीनर तरीका है

— अर्सलान शकूर

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 के बाहर सापेक्ष आयात / समर्थित नहीं हैं। ऐसा करने के लिए आपको अपनी छवियों को src / में रखना होगा, जिसकी अनुशंसा नहीं की गई है

— toing_toing

@toing_toing आप छवियों को src में रखने की अनुशंसा क्यों नहीं करते हैं? आधिकारिक दस्तावेज में ऐसे उदाहरण हैं जहां यह मामला है: facebook.github.io/create-react-app/docs/…

— roob

वेबपैक बंडल और संकलन समय का आकार बढ़ाता है, हर बार जब आप एक परिसंपत्ति को बदलते हैं और लोडिंग समय बढ़ाते हैं, तो उसे पुन: व्यवस्थित करने की आवश्यकता होती है। मैं इसे सार्वजनिक फ़ोल्डर और url द्वारा लिंक में रखना चाहूंगा।

— toing_toing

@toing_toing आप कहते हैं कि आप 'बल्कि' .... लेकिन आप यह नहीं कहते कि ऐसा कैसे करें।

— थॉमस जे रश

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

मेरा जवाब मूल रूप से रुबजन के समान है। मैं ऑब्जेक्ट वैल्यू के रूप में छवि का उपयोग करता हूं, बीटीडब्ल्यू। मेरे लिए दो संस्करण काम करते हैं:

{
"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

जैसा कि कुछ टिप्पणियों में बताया गया है, आप छवियों को सार्वजनिक फ़ोल्डर में रख सकते हैं। इसे Create-React-App के डॉक्स में भी समझाया गया है: https://create-react-app.dev/docs/use-the-public-folder/

Comments

डॉक्स में एक पंक्ति की तुलना में वास्तव में अधिक कोड की आवश्यकता नहीं है<img src={process.env.PUBLIC_URL + '/img/logo.png'} />

— dyedwiper