Bagaimana untuk Menyelesaikan Isu Laluan Imej dengan Penghala React dalam React.js?

Resolusi Laluan Img dalam React.js

Dalam React.js, atribut src bagi elemen dijangka mengandungi URL imej. Walau bagaimanapun, nampaknya dalam beberapa kes, laluan relatif tidak diselesaikan dengan betul, terutamanya dalam konteks Penghala Reaksi.

Pertimbangkan struktur fail berikut:

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

Dalam file1.jsx , kod berikut digunakan untuk memaparkan imej:

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

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

Seperti yang anda perhatikan, laluan relatif berfungsi dalam kes pertama tetapi tidak dalam kes kedua. Ini kerana laluan relatif diselesaikan berdasarkan URL, bukan seni bina fail.

Untuk memastikan imej dipaparkan dengan betul tanpa mengira laluan, satu penyelesaian adalah dengan mengimport imej menggunakan sintaks berikut:

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

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

Dengan mengimport imej, anda memastikan ia adalah sumber yang digabungkan dan akan tersedia dalam semua komponen, tanpa mengira laluan semasa.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Isu Laluan Imej dengan Penghala React dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!