Mengelola gambar (image) di website merupakan salah satu hal yang penting dalam pengembangan web. Terkadang, ketika mengintegrasikan gambar ke dalam halaman web, kita bisa menghadapi masalah seperti gambar tidak tersedia atau URL gambar tidak valid. Untuk mengatasi masalah ini, kita perlu melakukan validasi image di sisi client menggunakan JavaScript.
Daftar Isi
Menggunakan onerror di Tag Img
Salah satu cara yang umum digunakan untuk mengatasi error image adalah dengan menggunakan atribut onerror di dalam tag img. Dengan menggunakan metode ini, kita bisa menentukan tindakan apa yang harus dilakukan ketika gambar tidak dapat dimuat. Contohnya seperti berikut:
<img src="assets/img/background.jpg" onerror="this.onerror=null;this.src=\'assets/img/image-error.jpg\';" alt="image">
Pada contoh di atas, jika image utama tidak tersedia atau error, maka image alternatif yaitu image-error.jpg akan ditampilkan. Ini akan membuat tampilan user interface web kamu akan menjadi lebih enak untuk di lihat, tetapi jika kamu tidak memberikan onerror seperti itu ketika ada image yang tidak sukses di load akan muncul icon seperti broken image yang membuat user experience terhadap website kamu akan kurang baik.
Bagaimana Jika memiliki Banyak Alternatif Image?
Namun, bagaimana jika kita memiliki beberapa alternatif URL image dan ingin memilih URL dan image yang valid untuk ditampilkan? Misalnya, kita memiliki halaman profil untuk menampilkan sebuah avatar dan data avatar yang diberikan atau yang kita punya adalah sebuah array data image dengan value URL seperti di bawah ini:
const data_image = [
null,❌
"https://safarseptyadi.com/wp-content/uploads/2023/01/Capture-1ABC.png",❌
"https://safarseptyadi.com/wp-content/uploads/2023/",❌
"https://safarseptyadi.com/wp-content/uploads/2022/12/Untitled-1.jpg",✅
]
Penjelasan dari masing-masing array adalah sebagai berikut:
- Array pertama: URL kosong
- Array kedua: URL valid tetapi gambar tidak valid
- Array ketiga: URL dan gambar tidak valid
- Array keempat: URL dan gambar valid
Bagaimana cara kita bisa memilih image yang valid? Apakah dengan membaca URL sudah cukup? Tentu tidak terkadang URL yang lengkap bisa saja imagenya tidak ada mungkin karena gambarnya sudah dihapus, atau posisi path folder yang sudah berubah.
Membuat Fungsi ValidateImage
Agar kita dapat memilih url yang valid untuk dipakai di dalam tag img tersebut. Kita dapat membuat sebuah fungsi untuk memeriksa validitas URL gambar sebelum menampilkannya di tag img. Berikut adalah contoh implementasi fungsi tersebut:
function validateImage(url, callback) {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = function() { resolve() };
img.onerror = function() { reject() };
img.src = url;
})
}
Pada contoh di atas, kita membuat fungsi validateImage yang menggunakan Promise untuk memeriksa validitas URL gambar. Selanjutnya, kita akan membuat fungsi chooseValidImage terlebih dahulu untuk memilih URL gambar pertama yang valid dari array variable data_image. Seperti di bawah ini:
async function chooseValidImage(images) {
for (const url of images) {
try {
await validateImage(url);
return url; // Mengembalikan URL gambar valid pertama yang ditemukan
} catch (error) {
console.error(`Error loading image: ${error}`);
}
}
return null; // Jika tidak ada URL gambar valid
}
Di fungsi ini data_image akan di looping dengan menggunakan for. Setiap URL gambar yang diambil dari array images akan dimasukkan ke dalam blok try…catch. Pada blok try, fungsi validateImage(url) akan dipanggil untuk memeriksa validitas URL gambar tersebut.
Pemanggilan Fungsi ValidateImage
Dan selanjutnya kita tinggal memanggil chooseValidImage dengan mengirimkan data array yang kita punya sebelumnya seperti ini:
// Contoh penggunaan
chooseValidImage(data_image)
.then(validUrl => {
if (validUrl) {
const imgElement = document.createElement('img');
imgElement.src = validUrl;
imgElement.alt = 'Valid Image';
document.body.appendChild(imgElement);
} else {
console.error('No valid image found');
}
})
.catch(error => console.error('Error validating image:', error));
Pada code di atas setelah fungsi chooseValidImage selesai dieksekusi dan mengembalikan URL gambar yang valid, blok kode di dalam .then akan dijalankan. Setelah itu baru kita membuat element untuk menampilkan image tersebut di halaman HTML. Dengan meng-create element img baru mengguanakan document.createElement(‘img’).
Dan berikut full code yang kita buat dari awal hingga selesai:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const data_image = [
null,
"https://safarseptyadi.com/wp-content/uploads/2022/12/Untitled-1.jpg",
"https://safarseptyadi.com/wp-content/uploads/2023/01/Capture-1ABC.png",
"https://safarseptyadi.com/wp-content/uploads/2023/",
null
]
function validateImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(url); // Gambar valid
img.onerror = () => reject(url); // Gambar tidak valid
img.src = url;
});
}
async function chooseValidImage(images) {
for (const url of images) {
try {
await validateImage(url);
return url; // Mengembalikan URL gambar valid pertama yang ditemukan
} catch (error) {
console.error(`Error loading image: ${error}`);
}
}
return null; // Jika tidak ada URL gambar valid
}
// Contoh penggunaan
chooseValidImage(data_image)
.then(validUrl => {
if (validUrl) {
const imgElement = document.createElement('img');
imgElement.src = validUrl;
imgElement.alt = 'Valid Image';
document.body.appendChild(imgElement);
} else {
console.error('No valid image found');
}
})
.catch(error => console.error('Error validating image:', error));
</script>
</body>
</html>
Baca juga: Cara membuat submit button loading menggunakan CSS & Javascript
Kesimpulan
Validasi image di JavaScript sangat penting untuk menghindari error saat menampilkan gambar di halaman web. Dengan menggunakan metode onerror di tag img atau dengan memeriksa validitas URL gambar secara langsung, kita dapat mengelola gambar dengan lebih efisien dan menghindari masalah ketika mengintegrasikannya ke dalam halaman web. Dengan begitu, pengalaman pengguna dalam mengakses konten gambar akan lebih baik dan lebih lancar.
Semoga membantu guyss!!