Mengapa imej tempatan saya tidak dimuatkan dalam aplikasi React saya?

Imej Tempatan Gagal Dimuat dalam Aplikasi React

Membangunkan aplikasi React, pengguna mungkin menghadapi masalah di mana imej yang disimpan secara setempat enggan dipaparkan. Walaupun berjaya memaparkan imej yang dihoskan secara luaran (cth., placehold.it/200x200), imej tempatan kekal sukar difahami. Untuk menyelesaikan masalah ini, adalah penting untuk menyelidiki konfigurasi pelayan.

Memeriksa Kod Aplikasi

Kod yang disediakan untuk App.js, index.js dan pelayan. js kelihatan standard tanpa sebarang anomali yang jelas. Walau bagaimanapun, menyiasat sumber imej dalam App.js mendedahkan punca masalah:

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

Resolusi Pek Web

Apabila menggunakan Pek Web, imej yang ditentukan pengguna mesti diperlukan secara eksplisit untuk alat memprosesnya. Penggunaan semasa memerlukan Webpack untuk mencari imej dalam direktori "/images" dan memaparkannya. Tanpa langkah ini, Webpack mengabaikan imej tempatan, mengakibatkan ketiadaannya daripada aplikasi.

Pengubahsuaian yang Diperlukan

Untuk membetulkan isu, gantikan sumber imej semasa dengan sintaks berikut:

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

Dengan memerlukan imej, Webpack kini boleh memproses dan menggantikan sumber asal dalam App.js dengan imej yang betul, membolehkan imej setempat dipaparkan seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa imej tempatan saya tidak dimuatkan dalam aplikasi React saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!