Bagaimana cara mereferensikan gambar lokal di Bereaksi?

Bagaimana saya bisa memuat gambar dari direktori lokal dan memasukkannya ke dalam reactjs img srctag?

Saya memiliki gambar yang disebut one.jpegdi dalam folder yang sama dengan komponen saya dan saya mencoba keduanya <img src="one.jpeg" />dan <img src={"one.jpeg"} />di dalam renderfungsi saya tetapi gambar tidak muncul. Juga, saya tidak memiliki akses ke webpack configfile karena proyek dibuat dengan create-react-apputil baris perintah resmi .

Pembaruan: Ini berfungsi jika saya pertama kali mengimpor gambar dengan import img from './one.jpeg'dan menggunakannya di dalam img src={img}, tetapi saya memiliki begitu banyak file gambar untuk diimpor dan oleh karena itu, saya ingin menggunakannya dalam bentuk img src={'image_name.jpeg'},.

Pertama-tama bungkus src di {}

Lalu jika menggunakan Webpack; Dari pada: <img src={"./logo.jpeg"} />

Anda mungkin perlu menggunakan:

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

Opsi lain adalah dengan mengimpor gambar terlebih dahulu seperti itu:

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

atau ...

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

lalu tancapkan ...

<img src={logo} />

Saya akan merekomendasikan opsi ini terutama jika Anda menggunakan kembali sumber gambar.

Cara terbaik adalah mengimpor gambar terlebih dahulu dan kemudian menggunakannya.

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

Anda perlu membungkus jalur sumber gambar Anda di dalamnya {}

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

Anda harus menggunakan requirejika menggunakanwebpack

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

Di dalam folder publik buat folder aset dan letakkan jalur gambar yang sesuai.

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

cara terbaik untuk mengimpor gambar adalah ...

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

Jawaban saya pada dasarnya sangat mirip dengan Rubzen. Saya menggunakan gambar sebagai nilai objek, btw. Dua versi berfungsi untuk saya:

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

atau

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

Tanpa pembungkus - tapi itu aplikasi yang berbeda juga.

Saya telah memeriksa juga solusi "impor" dan dalam beberapa kasus berfungsi (apa yang tidak mengejutkan, yang diterapkan dalam pola App.js di Bereaksi), tetapi tidak dalam kasus seperti tambang di atas.

Anda memiliki dua cara untuk melakukannya.

Pertama

Impor gambar di atas kelas dan referensi di <img/>elemen Anda seperti ini

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

Kedua

Anda dapat langsung menentukan path gambar menggunakan require('../pathToImh/img')di <img/>elemen seperti ini

import React, { Component } from 'react'; 

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

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

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

Saya telah menggunakan cara ini, dan berhasil ... Saya harap Anda berguna.

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

ekspor Gambar default

Seperti beberapa disebutkan dalam komentar, Anda dapat meletakkan gambar di folder publik. Ini juga dijelaskan dalam dokumen Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/

Saya menemukan cara lain untuk mengimplementasikan ini (ini adalah komponen fungsional):

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

Semoga ini bisa membantu!