Laluan imej yang betul dalam React.js

Question

Saya menghadapi beberapa masalah dengan imej dalam projek React saya. Malah, saya selalu berfikir bahawa laluan relatif dalam atribut src telah dibina berdasarkan skema fail.

Ini ialah struktur fail saya:

komponen
    file1.jsx
    file2.jsx
    file3.jsx
bekas
img
js
...

Walau bagaimanapun, saya menyedari bahawa laluan itu dibina berdasarkan URL. Dalam salah satu komponen saya (cth. file1.jsx) saya mempunyai kod berikut: 

localhost/details/2


localhost/details/2/id
 ->

Bagaimana untuk menyelesaikan masalah ini? Saya mahu semua imej dipaparkan dengan laluan yang sama dalam sebarang bentuk penghalaan yang dikendalikan oleh penghala tindak balas. 

Answer 1

Dalam create-react-app, nampaknya anda tidak boleh menggunakan laluan relatif kepada imej rujukan. Sebaliknya, anda boleh menggunakan import untuk membawa masuk imej:

import logo from './logo.png' // 图片的相对路径

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

Answer 2

Anda menggunakan URL relatif, yang relatif kepada URL semasa dan bukan sistem fail. Anda boleh menyelesaikan masalah ini dengan menggunakan URL mutlak

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

Walau bagaimanapun, ini tidak sesuai apabila anda menggunakan www.my-domain.bike atau mana-mana tapak lain. Pendekatan yang lebih baik ialah menggunakan URL berbanding akar tapak

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