Mengapa Imej Tempatan Saya Tidak Dimuatkan dalam Apl Reaksi Saya?

Menyelesaikan Isu Muatan Imej Tempatan yang Menyusahkan dalam React

Apabila bekerja dengan React, anda mungkin menghadapi senario di mana imej tempatan anda gagal dimuatkan, manakala imej luaran dipaparkan tanpa satu halangan. Ini boleh disebabkan oleh salah tanggapan yang lazim mengenai pemprosesan imej dalam Webpack.

Webpack memainkan peranan penting dalam proses pembangunan dan memahami cara ia mengendalikan aset imej adalah penting. Tidak seperti imej luaran, imej tempatan perlu diimport secara eksplisit ke dalam Webpack untuk menjalani pemprosesan. Perbezaan ini menjadi jelas dalam kod anda, di mana imej luaran "placehold.it/200x200" berjaya dimuatkan, manakala imej setempat "/images/resto.png" kekal tidak kelihatan.

Untuk membetulkan isu ini dan memastikan bahawa imej tempatan anda dipaparkan seperti yang dimaksudkan, anda perlu menggantikan sintaks sumber semasa dengan yang berikut:

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

Dengan memasukkan arahan "memerlukan", anda secara eksplisit mengarahkan Webpack untuk memproses imej dan memasukkannya ke dalam berkas. Ini membolehkan Webpack melaksanakan tugas pengoptimuman dan penggantian imejnya, menyelesaikan isu pemuatan. Untuk setiap imej yang anda ingin muatkan, ingat untuk menggantikan "resto.png" dengan nama imej yang sesuai.

Pengubahsuaian mudah ini akan memastikan imej setempat anda diproses dan dimuatkan dengan betul, meningkatkan pengalaman pengguna anda Aplikasi bertindak balas.

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