Laluan imej yang betul dalam React.js
P粉024986150
2023-08-21 14:24:49
<p>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. </p>
<p>Ini ialah struktur fail saya: </p>
<pre class="brush:php;toolbar:false;">komponen
file1.jsx
file2.jsx
file3.jsx
bekas
img
js
...</pra>
<p>Walau bagaimanapun, saya menyedari bahawa laluan itu dibina berdasarkan URL. Dalam salah satu komponen saya (cth. file1.jsx) saya mempunyai kod berikut: </p>
<pre class="brush:php;toolbar:false;">localhost/details/2
<img src="../img/myImage.png" />
localhost/details/2/id
<img src="../img/myImage.png" /> ->
<p>Bagaimana untuk menyelesaikan masalah ini? Saya mahu semua imej dipaparkan dengan laluan yang sama dalam sebarang bentuk penghalaan yang dikendalikan oleh penghala tindak balas. </p>
Dalam
create-react-app
, nampaknya anda tidak boleh menggunakan laluan relatif kepada imej rujukan. Sebaliknya, anda boleh menggunakan import untuk membawa masuk imej: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" />