Saya memiliki beberapa masalah dengan gambar saya di proyek reaksi saya. Memang saya selalu berpikir bahwa path relatif ke atribut src dibangun pada arsitektur file

Di sini arsitektur file saya:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Namun saya menyadari bahwa path dibangun di atas url. Di salah satu komponen saya (misalnya ke file1.jsx) saya punya ini:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Bagaimana mungkin untuk menyelesaikan masalah ini? Saya ingin bahwa dalam segala bentuk rute yang ditangani oleh react-router, semua gambar dapat ditampilkan dengan jalur yang sama.

Anda menggunakan url relatif, yang relatif terhadap url saat ini, bukan sistem file. Anda dapat menyelesaikan ini dengan menggunakan url absolut

<img src ="http://localhost:3000/details/img/myImage.png" />

Tapi itu tidak bagus untuk ketika Anda menyebarkan ke www.my-domain.bike, atau situs lain. Lebih baik menggunakan url relatif terhadap direktori root situs

<img src="/details/img/myImage.png" />

Di create-react-appjalur relatif untuk gambar tampaknya tidak berfungsi. Sebagai gantinya, Anda dapat mengimpor gambar:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Jika Anda menggunakan buat-reaksi-aplikasi untuk membuat proyek Anda maka folder publik Anda dapat diakses. Jadi, Anda perlu menambahkan imagefolder Anda di dalam folder publik.

publik / gambar /

<img src="/images/logo.png" />

Dengan create-react-appada folder publik (dengan index.html ...). Jika Anda menempatkan "myImage.png" di sana, katakan di bawah sub-folder img , maka Anda dapat mengaksesnya melalui:

<img src={window.location.origin + '/img/myImage.png'} />

1. Buat folder gambar di dalam src (/ src / images) dan simpan gambar Anda di dalamnya. Kemudian impor gambar ini di komponen Anda (gunakan jalur relatif Anda). Seperti di bawah ini-

   import imageSrc from './images/image-name.jpg';

   Dan kemudian di komponen Anda.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Cara lain adalah menyimpan gambar di folder publik dan mengimpornya menggunakan jalur relatif. Untuk ini, buat folder gambar di folder publik dan simpan gambar Anda di dalamnya. Dan kemudian di komponen Anda gunakan seperti di bawah ini.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Kedua metode ini berfungsi tetapi yang pertama direkomendasikan karena cara yang lebih bersih dan gambar ditangani oleh webpack selama waktu pembuatan.

dalam kasus saya kode berikut juga berfungsi.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Beberapa jawaban yang lebih tua tidak berfungsi, yang lain baik tetapi tidak akan menjelaskan tema, secara ringkas:

Jika gambar ada di direktori 'publik'

Contoh: \public\charts\a.png

Dalam html:

<img id="imglogo" src="/charts/logo.svg" />

Dalam JavaScript:

Buat gambar ke img baru, secara dinamis:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Setel gambar ke img yang ada dengan id sebagai 'img1', secara dinamis:

document.getElementById('img1').src = 'charts/a.png';

Jika gambar ada di direktori 'src':

Contoh: \src\logo.svg

Dalam JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

Dalam JSX:

<img src={logo} /> 

Menambahkan file-loader npm ke webpack.config.js per instruksi penggunaan resminya seperti:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

bekerja untukku.

Impor Gambar di komponen Anda

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

Dan panggil nama gambar pada gambar src = {RecentProjectImage_3} sebagai objek

 <Img src={RecentProjectImage_3} alt="" />

Seorang teman menunjukkan kepada saya bagaimana melakukan ini sebagai berikut:

"./" berfungsi ketika file yang meminta gambar (misalnya, "example.js") berada pada level yang sama dalam struktur struktur folder dengan folder "gambar".

Tempatkan logo di folder publik Anda di bawah mis. Publik / img / logo.png dan kemudian merujuk ke folder publik sebagai% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

Penggunaan% PUBLIC_URL% di atas akan diganti dengan URL publicfolder selama pembuatan. Hanya file di dalampublic folder yang dapat dirujuk dari HTML.

Tidak seperti "/img/logo.png" atau "logo.png", "% PUBLIC_URL% / img / logo.png" akan berfungsi dengan benar baik dengan perutean sisi klien dan URL publik non-root. Pelajari cara mengonfigurasi URL publik non-root dengan menjalankan npm run build.