Pengantar
Saat mengembangkan aplikasi web dengan React, kami biasanya ingin menyertakan elemen visual untuk menarik minat pengguna. Elemen visual ini dapat berupa semua jenis gambar, termasuk JPG, PNG, SVG, GIF, dan banyak lainnya.
Dalam artikel ini, kita akan mempelajari cara mengimpor gambar dengan React dan melihat berbagai cara untuk mencapainya.
Gambar eksternal dan gambar lokal adalah dua jenis gambar yang ingin kita gunakan dalam aplikasi React kita. Kami terutama memperhatikan gambar lokal dalam artikel ini karena gambar eksternal tidak mengharuskan kami untuk mengimpornya.
Gambar eksternal adalah gambar yang telah dihosting secara eksternal dan dapat diakses oleh siapa saja melalui URL, sedangkan gambar lokal adalah gambar yang hanya tersedia untuk kita di komputer lokal atau folder proyek dan yang ingin kita gunakan di aplikasi kita.
Cara Menampilkan Gambar yang dihosting Secara Eksternal
Sebelum kita masuk ke cara mengimpor gambar, penting untuk dipahami bahwa gambar yang dihosting di tempat lain bekerja dengan cara yang sama seperti kita selalu menggunakan gambar dalam HTML – dengan menambahkan URL ke src atribut dari img menandai:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Sekarang mari kita pelajari bagaimana kita dapat mengimpor gambar (lokal) dengan React!
Cara Mengimpor Gambar dengan React
Terlepas dari gambar eksternal, cara gambar digunakan dalam React berbeda secara signifikan dari kerangka kerja lain atau bahkan HTML. Gambar-gambar ini pertama-tama harus diimpor ke React sebelum dapat digunakan dalam aplikasi kita.
Hal ini dapat dicapai dengan dua cara: dengan menggunakan import pernyataan atau dengan menggunakan require() fungsi. Kami akan membahas kedua pendekatan.
Cara Mengimpor Gambar Dengan React Menggunakan mengimpor Pernyataan
Karena lebih mudah dibaca dan dipahami, import pernyataan adalah metode yang paling umum digunakan untuk mengimpor gambar yang disimpan secara lokal di React. Gambar diperlakukan sebagai ekspor default, dan saat kita mengimpornya, kita melakukannya dengan cara yang sama seperti kita mengimpor komponen. Ini dilakukan dengan menentukan jalur relatif dari file ke gambar yang kita impor:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Dalam kode di atas, kami masih menggunakan img tandai dan src atribut, tapi kali ini src atribut menerima variabel daripada string, yang diteruskan menggunakan kurung kurawal di BEJ.
Catatan: Kita dapat mengimpor gambar sebanyak yang kita mau, tetapi setiap gambar harus memiliki nama unik dalam pernyataan impor, jika tidak maka akan menimbulkan kesalahan.
Penting untuk memahami cara menentukan dan mendapatkan jalur relatif untuk file; jika tidak, bug dan kesalahan dapat terjadi. Pada contoh sebelumnya, gambar disimpan dalam format /src/images.
Cara Mengimpor Gambar Dengan Bereaksi menggunakan Fungsi require()
Grafik require() function adalah fungsi Node.js yang digunakan untuk memasukkan modul eksternal dari file selain file saat ini. Ini bekerja dengan cara yang sama seperti import pernyataan dan memungkinkan kami untuk menyertakan gambar:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Satu-satunya perbedaan adalah baris pertama di mana kami membutuhkan gambar melalui jalur relatifnya dan kemudian menyimpannya dalam variabel yang kami akses di img tag melalui kurung kurawal.
Kami juga dapat memutuskan untuk melakukan ini sebaris dan menghindari baris tambahan yang digunakan untuk menetapkan gambar ke variabel, karena itu tidak wajib:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Kesimpulan
Kami belajar cara mengimpor gambar lokal menggunakan import pernyataan dan require() fungsi dalam artikel ini.
