Cara Menampilkan Gambar dan Asset
1. Latar Belakang
Dalam pengembangan web menggunakan HTML biasa, menampilkan gambar sangatlah mudah; Anda cukup menggunakan tag <img src="path/to/image.jpg">. Namun, ketika bekerja dengan ekosistem React (terutama jika menggunakan build tool seperti Vite atau Webpack), cara kita menangani file statis atau aset menjadi sedikit berbeda.
React memisahkan aset ke dalam dua tempat utama: folder src/assets/ dan folder public/. Memilih cara dan tempat yang tepat untuk menyimpan gambar akan sangat memengaruhi performa dan ukuran aplikasi Anda saat di-build.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
Berikut adalah tiga cara utama untuk menampilkan gambar beserta skenario terbaik penggunaannya:
1. Mengimpor dari Folder src/assets/
Ini adalah cara yang paling disarankan untuk sebagian besar gambar di dalam proyek React. Anda meletakkan gambar di dalam folder src/assets/, lalu mengimpornya ke dalam komponen layaknya mengimpor file JavaScript.
Contoh Penggunaan:
import React from 'react';
// 1. Impor gambar dari struktur folder Anda
import keychainKatalog from '../assets/keychain_katalog.jpg';
export default function ProductDisplay() {
return (
<div className="product-card">
<h2>Katalog Gantungan Kunci Handmade</h2>
{/* 2. Gunakan variabel hasil impor di dalam properti src */}
<img src={keychainKatalog} alt="Gantungan Kunci Terbaru" className="katalog-img" />
</div>
);
}
2. Menggunakan Folder public/ (Untuk Aset Global & Dinamis)
Segala sesuatu yang Anda letakkan di dalam folder public/ tidak akan diproses oleh Webpack atau Vite. File ini akan disalin mentah-mentah ke dalam folder hasil build.
Cara ini sangat cocok untuk:
- Gambar yang ukurannya sangat besar.
- File yang namanya harus tetap statis dan tidak boleh berubah (seperti favicon.ico atau manifest.json).
- Gambar yang path-nya perlu dipanggil secara dinamis (misalnya dari data API) di mana Anda tidak bisa melakukan import satu per satu di awal.
Contoh Penggunaan:
Di sini, Anda tidak perlu menggunakan sintaks import. Cukup panggil path relatifnya yang dimulai dengan garis miring /.
export default function PromoBanner() {
// Misalkan data ini berasal dari database
const currentPromo = "/images/banner_diskon.png";
return (
<div className="banner-container">
{/* Gambar diambil langsung dari folder public/images/ */}
<img src={currentPromo} alt="Banner Diskon Spesial" />
</div>
);
}
3. Merender File SVG (Sebagai Gambar atau Komponen)
File Vector (SVG) sering digunakan untuk logo, ikon, atau watermark karena ukurannya yang ringan dan tidak akan pecah saat diperbesar. Di React, ada dua cara menampilkan SVG.
1. Sebagai Tag <img /> Biasa
Sama seperti .jpg atau .png, Anda bisa mengimpornya langsung.
import watermarkFayrin from '../assets/watermark_fayrin.svg';
export default function ArtworkGallery() {
return (
<div className="artwork-frame">
<img src={watermarkFayrin} alt="Fayrin Hoshizora Watermark" className="overlay-watermark" />
</div>
);
}
2. Sebagai Komponen React (Inline SVG)
Jika Anda menggunakan Create React App atau plugin tambahan di Vite (seperti vite-plugin-svgr), Anda bisa mengimpor SVG sebagai sebuah komponen React. Cara ini sangat berguna jika Anda ingin mengubah warna (fill) atau ukuran SVG menggunakan CSS.
import { ReactComponent as MyLogo } from '../assets/watermark_fayrin.svg';
export default function Navbar() {
return (
<nav>
{/* SVG dirender langsung sebagai elemen <svg> di HTML */}
<MyLogo style={{ width: '50px', fill: '#ff69b4' }} />
</nav>
);
}
4. Daftar Pustaka
SantriKoding. (2026). Belajar React Dasar #12: Menampilkan gambar di React. https://santrikoding.com/belajar-react-dasar-12-menampilkan-gambar-di-react
Petani Kode. (2020). Belajar ReactJS untuk pemula: Cara menggunakan asset dan gambar. https://www.petanikode.com/reactjs-asset/
Malas Ngoding. (2021). Cara menampilkan gambar di React JS. https://www.malasngoding.com/cara-menampilkan-gambar-di-react-js/
Ilmu Coding. (2023). Cara menggunakan gambar dan file statis pada ReactJS. https://ilmu-coding.com/cara-menggunakan-gambar-dan-file-statis-reactjs/
0 Komentar