Bagaimana Mengendalikan Laluan Imej dengan Betul dalam React.js?

Pengendalian Laluan Imej yang Betul dalam React.js

Dalam projek React.js, laluan relatif untuk imej dalam atribut src tidak berasaskan secara automatik pada seni bina fail. Sebaliknya, laluan itu diperoleh daripada URL, yang membawa kepada isu yang berpotensi jika berbilang laluan digunakan.

Untuk menangani perkara ini, pertimbangkan penyelesaian berikut:

Untuk setiap rujukan imej, importnya ke dalam komponen menggunakan format berikut:

<code class="javascript">import { ImageName } from './path/to/image.png';</code>

Sebagai contoh, jika anda mempunyai imej bernama myImage.png yang terletak dalam folder img, anda akan mengimportnya seperti berikut:

<code class="javascript">import myImage from './img/myImage.png';</code>

Dalam JSX, nyatakan atribut src menggunakan pembolehubah yang diimport:

<code class="javascript"><img src={myImage} alt="My Image" /></code>

Menggunakan pendekatan ini memastikan imej akan dimuatkan dengan betul tanpa mengira URL semasa, membolehkan anda mengekalkan rujukan imej yang konsisten sepanjang aplikasi anda.

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