Laluan imej yang betul dalam React.js
P粉024986150
P粉024986150 2023-08-21 14:24:49
0
2
591
<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>
P粉024986150
P粉024986150

membalas semua(2)
P粉509383150

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"}/> 
        )  
    }
}
P粉478188786

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan