React'teki yerel bir görüntüye nasıl başvurabilirim?

Resmi yerel dizinden nasıl yükleyebilir ve reactjs img srcetikete ekleyebilirim ?

Aradım bir resim one.jpegbenim bileşeni olarak aynı klasörün içine de ben de denedim <img src="one.jpeg" />ve <img src={"one.jpeg"} />benim iç renderişlevi ancak resim görünmüyor. Ayrıca, webpack configproje resmi create-react-appkomut satırı util ile oluşturulduğundan dosyaya erişimim yok .

Güncelleme: Bu, görüntüyü ilk import img from './one.jpeg'olarak içeri alıp içeride kullanırsam çalışır img src={img}, ancak içe aktarılacak çok fazla görüntü dosyam var ve bu nedenle bunları formda kullanmak istiyorum img src={'image_name.jpeg'}.

Her şeyden önce src'yi {}

Sonra Webpack kullanıyorsanız; Onun yerine: <img src={"./logo.jpeg"} />

Kullanmanız gerekebilir gerekebilir:

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

Başka bir seçenek, önce görüntüyü şu şekilde içe aktarmak olacaktır:

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

veya ...

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

sonra takın ...

<img src={logo} />

Özellikle görüntü kaynağını yeniden kullanıyorsanız bu seçeneği öneririm.

En iyi yol önce görüntüyü içe aktarmak ve sonra kullanmaktır.

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

Görüntü kaynak yolunu içine sarmanız gerekiyor {}

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

Sen kullanımına gerek requirekullanılıyorsawebpack

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

Ortak klasörün içinde bir varlık klasörü oluşturun ve buna göre görüntü yolunu yerleştirin.

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

görüntüyü içe aktarmanın en iyi yolu ...

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

Bunu yapmanın iki yolu var.

İlk

Sınıfın üstündeki Görüntü alma ve ardından ona gönderimde <img/>böyle elemanın

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" /> 
  }
} 

İkinci

Doğrudan kullanarak görüntü yolunu belirtebilirsiniz require('../pathToImh/img')içinde <img/>böyle elemanın

import React, { Component } from 'react'; 

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

Cevabım temel olarak Rubzen'e çok benziyor. Resmi btw nesne değeri olarak kullanıyorum. İki versiyon benim için çalışıyor:

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

veya

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

Paketleyici olmadan - ama bu da farklı bir uygulamadır.

Ben de "ithalat" çözüm kontrol ve birkaç durumda çalışır (ne şaşırtıcı, React desen App.js uygulanan), ama yukarıdaki benim gibi değil.

Bunu uygulamak için başka bir yol buldum (bu fonksiyonel bir bileşendir):

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

Umarım yardımcı olur!

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

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

Bu şekilde kullandım ve işe yarıyor ... Umarım faydalı olur.

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

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

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

varsayılan Resmi dışa aktar

Yorumlarda belirtildiği gibi, görüntüleri ortak klasöre koyabilirsiniz. Bu ayrıca Create-React-App dokümanlarında da açıklanmaktadır: https://create-react-app.dev/docs/using-the-public-folder/