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/2localhost/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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 (
) } }Anda menggunakan URL relatif, yang relatif kepada URL semasa dan bukan sistem fail. Anda boleh menyelesaikan masalah ini dengan menggunakan URL mutlak
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