Mengapa Imej Tempatan Tidak Dimuatkan dalam Apl Reaksi Saya?

Imej Tempatan Tidak Dimuatkan dalam Apl React

Dalam React, adalah perkara biasa untuk menghadapi isu di mana imej tempatan gagal dimuatkan semasa imej luaran dimuatkan. Masalah ini boleh timbul apabila menggunakan Webpack, pengikat yang mengoptimumkan dan membungkus kod bahagian hadapan.

Memahami Isu

Webpack termasuk aset, seperti imej, ke dalam kod dibundel. Secara lalai, ia tidak mengenali imej tempatan tanpa kemasukan yang jelas. Ini kerana Webpack menjangkakan imej akan diimport sebagai modul, membolehkannya memproses dan mengoptimumkannya.

Penyelesaian: Memerlukan Imej Setempat

Untuk menyelesaikan isu tersebut, anda perlu untuk memerlukan imej setempat dalam komponen React anda. Gantikan yang berikut:

<img src={"/images/resto.png"} />

Dengan:

<img src={require('/images/resto.png')} />

Dengan memerlukan imej, anda secara eksplisit memasukkannya ke dalam berkas Webpack, membenarkannya memproses dan menggantikan laluan sumber dengan berkas yang betul aset. Dengan cara ini, React boleh berjaya memuatkan imej tempatan daripada kod yang disusun.

Dengan membuat pengubahsuaian ini, anda sepatutnya boleh memuatkan imej setempat dalam aplikasi React anda tanpa sebarang masalah.

Atas ialah kandungan terperinci Mengapa Imej Tempatan Tidak Dimuatkan dalam Apl Reaksi Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!