Image

Ngorei

framework v4.0.2

Komponen

Intro
Rute
Render

Pengelolaan Gambar (Images)

Folder assets/images berfungsi sebagai tempat penyimpanan terpusat untuk semua aset gambar yang digunakan dalam aplikasi web. Pengorganisasian gambar dilakukan dalam beberapa subfolder untuk memudahkan pengelolaan dan penggunaan, seperti:

[root]
   ├── app/
   ├── assets/
   │   ├── css/
   │   ├── fonts/
   │   ├── js/
   │   ├── logo/
   │   │     └── favicon.png
   ├── public/
   │   ├── exsampel/
   │   │── package.json
   │   └── index.html
  • backgrounds - untuk gambar latar belakang
  • icons - untuk ikon-ikon UI
  • content - untuk gambar konten
  • products - untuk gambar produk

Untuk mengoptimalkan performa website, beberapa hal yang perlu diperhatikan dalam pengelolaan gambar:

  • Gunakan format gambar yang tepat (JPG untuk foto, PNG untuk gambar dengan transparansi, WebP untuk optimasi)
  • Optimalkan resolusi gambar sesuai kebutuhan tampilan (1x untuk tampilan normal, 2x untuk perangkat retina)
  • Kompres gambar tanpa mengurangi kualitas visual secara signifikan

Untuk menggunakan file gambar eksternal dalam aplikasi, cukup gunakan format penulisan berikut:

Panduan penggunaan path gambar:

  • Awali path dengan "img/" untuk mengakses folder gambar
  • Ikuti dengan nama subfolder (jika ada), contoh: "img/logo/"
  • Akhiri dengan nama file gambar, contoh: "img/logo/favicon.png"
  • Pastikan menggunakan nama file yang tepat termasuk ekstensi (.jpg, .png, dll)
<img src="img/logo/favicon.png" alt="Image">


Output:
http://localhost/img/logo/favicon.png

Dengan mengikuti struktur path yang benar, gambar akan dapat diakses dan ditampilkan dengan tepat di aplikasi web.