Bagaimana Mengendalikan Laluan Imej dengan Betul dalam Projek React.js?

Pendekatan Betul untuk Laluan Imej dalam React.js

Menentukan laluan yang betul untuk imej dalam projek React.js telah menjadi cabaran biasa. Secara tradisinya, laluan relatif digunakan dalam atribut src, berdasarkan struktur fail projek. Walau bagaimanapun, dalam projek React.js yang dibina dengan create-react-app, pendekatan ini mungkin tidak selalu berfungsi.

Ini terbukti daripada contoh yang diberikan, di mana imej dipaparkan dengan betul apabila laluannya ialah "/details/2 " tetapi bukan apabila ia adalah "/details/2/id." Ketidakkonsistenan ini timbul kerana laluan relatif ditafsirkan berdasarkan struktur URL dan bukannya seni bina fail.

Untuk menyelesaikan isu ini, kaedah alternatif disyorkan untuk mentakrifkan laluan imej dalam projek React.js. Daripada menggunakan laluan relatif dalam atribut src, imej boleh diimport menggunakan pernyataan import. Contohnya:

import logo from './logo.png';

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

Dalam pendekatan ini, pernyataan import menentukan laluan relatif kepada fail imej, dan imej itu kemudiannya disimpan sebagai pembolehubah. Apabila memaparkan komponen, pembolehubah ini digunakan sebagai sumber untuk imej.

Kaedah ini memastikan laluan imej kekal konsisten merentas laluan berbeza yang dikendalikan oleh React-router, kerana laluan relatif ditetapkan semasa proses import dan bukan berdasarkan struktur URL semasa. Akibatnya, semua imej akan dipaparkan dengan betul tanpa mengira laluan tertentu yang sedang diakses.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Laluan Imej dengan Betul dalam Projek React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!