Bagaimana untuk Memastikan Paparan Imej Konsisten Merentasi Laluan dalam React.js?

Memahami Gelagat Laluan Asal Akar

Dalam projek React.js, laluan imej yang menggunakan atribut src tidak berdasarkan struktur fail tetapi pada asal usul URL. Ini bermakna jika aplikasi anda disampaikan di localhost/details/2, imej yang dirujuk dengan laluan relatif akan dimuatkan dengan betul selagi laluan itu kekal tidak berubah dalam laluan tersebut. Walau bagaimanapun, jika laluan berubah kepada localhost/details/2/id, imej mungkin tidak dipaparkan kerana punca akar telah berubah.

Menyelesaikan Ketergantungan Laluan Imej pada Laluan

Untuk memastikan paparan imej yang konsisten merentas laluan, pertimbangkan untuk menggunakan laluan mutlak. Begini cara anda boleh mengimport dan merujuk imej menggunakan laluan mutlak:

import myImage from '/img/myImage.png'; // Absolute path to image

function File1() {
  return <img src={myImage} alt="My Image" />;
}

Dengan mengimport imej sebagai modul, anda mewujudkan titik rujukan mutlak yang kekal konsisten tanpa mengira perubahan laluan. Pendekatan ini memastikan imej sentiasa diambil dari lokasi yang betul.

Pendekatan Alternatif

Jika anda lebih suka menggunakan laluan relatif, anda boleh menggunakan alternatif ini:

• Gunakan Folder Awam: Alihkan imej anda ke direktori awam, yang secara automatik didedahkan oleh create-react-app dan boleh diakses dari mana-mana laluan dengan laluan relatif.
• Konfigurasikan Pek Web: Mengubah suai konfigurasi Pek Web membolehkan anda menyesuaikan cara laluan relatif diselesaikan. Walau bagaimanapun, ini adalah penyelesaian yang lebih kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Paparan Imej Konsisten Merentasi Laluan dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!