Tuesday, October 11, 2022

Cara Embeding Gambar di Google Drive dengan Tag HTML

Cara Embeding Gambar di Google Drive dengan Tag HTML

Dalam membuat website atau blog salah satu cara untuk membuat tampilan lebih menarik dan lebih memberikan informasi yang jelas adalah dengan menampilkan gambar. Dengan pertimbangan keamanan dan efisiensi ukuran penyimpan untuk gambar bisa menggunakan layanan cloud. Dalam hal ini salah satunya menggunakan Google Drive sebaga penyedia cloud untuk penyimpanan data. Misal kita simpan gambar-gambar untuk blog atau web kita kemudian kita link kan gambar tersebut dengan memanggil menggunakan tag html img.

Jika langsung dengan melinkan alamat gambar dari Google Drive maka gambar tersebut tidak akan langsung tampil. Sehingga untuk bisa menampilkan gambar tersebut perlu dilakukan langkah-langkah yaitu:

  • Buka Google Drive,

  • Upload gambar,

  • Klik kanan pada gambar pilih share atau bagikan,

  • Setelah tampil, rubah seting Akses Umum menjadi Siapa saja yang memiliki link,


  • Salin Link, misal kita dapat link: https://drive.google.com/file/d/1huTfLaQQVrusrwK-US_T1VRFW10pHJ4G/view

  • Masukan kode ke tag img dengan menambahkan kode https://drive.google.com/uc?export=view&id=[id_image]

  • Dan ganti [id_image] dengan id image di Google drive dalam hal ini 1huTfLaQQVrusrwK-US_T1VRFW10pHJ4G
<img src="https://drive.google.com/uc?export=view&id="1huTfLaQQVrusrwK-US_T1VRFW10pHJ4G">
  • Dan akhirnya kita bisa menampilkan gambar di Google Drive.
Terima kasih sudah menyimak tutorial sederhana namun sangat bermanfaat. @wawanhn

Referensi:
https://stackoverflow.com/questions/15557392/how-do-i-display-images-from-google-drive-on-a-website
https://dev.to/temmietope/embedding-a-google-drive-image-in-html-3mm9