Javascript menambahkan gambar ke array

Question

Itu akan menjadi salah satu cara, meskipun saya lebih suka menggunakan objek karena menurut saya itu membuat kode lebih mudah dibaca dan membuatnya lebih mudah untuk menambahkan lebih banyak properti di kemudian hari.

Table of Contents Show

1. Tampilkan Gambar dalam HTML Biasa
2. Tetapkan Atribut Src di JavaScript
3. Tetapkan Beberapa Atribut Src di JavaScript
4. Buat Elemen Gambar di JavaScript
5. Tambahkan Gaya Inline ke Gambar di JavaScript
6. Tambahkan Atribut ID ke Gambar di JavaScript
7. Tambahkan Atribut Kelas ke Gambar di JavaScript
8. Lampirkan Acara Klik ke Elemen Gambar
9. Alihkan Pemilih CSS Saat Gambar Diklik
10. Dapatkan Item Gambar yang Dipilih Saat Diklik
11. Buat Banyak Gambar dalam JavaScript
12. Gaya Bersyarat dalam Gambar Lingkaran
13. Tambahkan Peristiwa Klik ke Semua Gambar
14. Terapkan Kelas CSS Hanya Untuk Gambar yang Diklik
Bagaimana cara memasukkan gambar ke dalam array di JavaScript?
Bagaimana cara menyisipkan gambar dalam JavaScript?
Bisakah Anda menambahkan objek ke array?
Bagaimana cara menampilkan gambar dalam JavaScript?

Anda dapat mengatur array seperti ini

var fruitsArray = [
  { name: 'Banana', image: 'banana.jpg' }, 
  { name: 'Apple', image: 'apple.jpg' }, 
  { name: 'Orange', image: 'orange.jpg' }
];

dan kemudian saat memperbarui halaman dengan buah acak

for (var i = 0; i < boldStuffs.length; i += 1) {
    var fruit = getRandomItem(fruitsArray);
    boldStuffs[i].innerHTML = fruit.name + '';
}

_

pix[0]=new Image;
pix[0].src="r/r1.jpg";
pix[1]=new Image;
pix[1].src="r/r2.jpg";
pix[2]=new Image;
pix[2].src="r/r3.jpg";
  .
  .
  .
pix[9]=new Image;
pix[9].src="r/r10.jpg";

biarkan setiap elemen array menjadi objek Gambar dengan sumber yang ditentukan oleh string yang merujuk ke file yang berisi gambar

[Sunting]

+

0

-

0

js menambahkan gambar ke array dan menambahkan ke badan

Eshaal-Wilkinson

594

Salin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<body>
  <script>
    const images = []

    images[0] = new Image();
    images[0].src = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png';

    images[1] = new Image();
    images[1].src = 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png';

    function loadImages(imagesArray) {
      for (var i = 0; i < imagesArray.length; i++) {
        // append to body element
        document.querySelector('body').appendChild(imagesArray[i]);
      }
    }

    loadImages(images);
  </script>
</body>
</html>

_

Dalam tutorial JavaScript ini, Anda akan mempelajari 14 skenario umum yang mungkin akan Anda temui jika Anda belum melakukannya saat bekerja dengan gambar

1. Tampilkan Gambar dalam HTML Biasa

Buat tag gambar statis dengan atribut src dengan URL gambar di file HTML

<img src="https://picsum.photos/200/300" />

_

keluaran

Seperti yang Anda lihat, saya menggunakan situs web picsum untuk tujuan demonstrasi. Itu memungkinkan saya mendapatkan URL gambar acak dengan dimensi spesifik yang diteruskan di akhir URL

Cukup lurus ke depan, bukan?

Mari kita lihat cara mengatur atribut src secara dinamis melalui JavaScript selanjutnya

2. Tetapkan Atribut Src di JavaScript

Di file HTML, buat tag gambar HTML seperti itu

<img/>

Di JavaScript, dapatkan referensi ke tag gambar menggunakan metode querySelector()

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_

Direkomendasikan → Variabel JS

Kemudian, tetapkan URL gambar ke atribut src dari elemen gambar

Alternatifnya, Anda dapat menyetel atribut src ke tag gambar menggunakan sintaks tanda kurung siku seperti ini

img["src"] = "https://picsum.photos/200/301";

keluaran

3. Tetapkan Beberapa Atribut Src di JavaScript

Katakanlah Anda memiliki tiga elemen gambar di halaman HTML di bagian yang berbeda

<img/> // image 1
...
<img/> // image 2
...
<img/> // image 2

_

Dengan menggunakan atribut ID atau class, Anda dapat dengan mudah menargetkan setiap elemen gambar secara terpisah untuk menetapkan nilai yang berbeda pada atribut src yang akan saya bahas nanti di bab ini

Izinkan saya menunjukkan kepada Anda apa yang 🛑 TIDAK boleh dilakukan ketika memiliki banyak tag gambar statis di halaman HTML Anda

const img = document.querySelector("img");

_

Pada contoh sebelumnya, saya menggunakan metode querySelector() untuk menargetkan elemen gambar yang berfungsi dengan baik untuk satu elemen gambar

Untuk mendapatkan referensi ke ketiga elemen gambar, kita perlu menggunakan querySelectorAll()

const img = document.querySelectorAll("img");

Ini akan mendapatkan semua referensi elemen gambar dan membuat Node List Array darinya

img[0].src = "https://picsum.photos/200/301"; // image 1
img[1].src = "https://picsum.photos/200/302"; // image 2
img[2].src = "https://picsum.photos/200/303"; // image 3

Ini berfungsi dengan baik, tetapi ada satu masalah dengan pendekatan ini

Katakanlah Anda tidak lagi membutuhkan elemen gambar pertama dan menghapusnya dari kode HTML

Tebak apa?

Elemen gambar kedua dan ketiga akan memiliki gambar pertama dan kedua

4. Buat Elemen Gambar di JavaScript

Buat elemen gambar menggunakan metode

img["src"] = "https://picsum.photos/200/301";

_3 pada objek dokumen

Kemudian, setel URL gambar ke atribut src-nya

const img = document.createElement("img");
img.src = "https://picsum.photos/200/301";
document.body.appendChild(img);

Terakhir, tambahkan elemen gambar ke hierarki DOM dengan menambahkannya ke elemen body

Sebagai alternatif, Anda dapat menggunakan konstruktor

img["src"] = "https://picsum.photos/200/301";

_4 yang membuat instance HTMLImageElement baru dan fungsinya setara dengan dokumen. buatElemen(“img”)

Secara opsional, Anda dapat memberikan parameter lebar dan tinggi ke sana

const img = new Image(100, 200); // width, height
img.src = "https://picsum.photos/200/301";
document.body.appendChild(img);

Ini akan setara dengan ini di HTML

<img/>

0

5. Tambahkan Gaya Inline ke Gambar di JavaScript

Dengan menggunakan properti style, kita dapat menerapkan style ke elemen gambar secara langsung di JavaScript

Seperti yang Anda lihat pada contoh di bawah ini, saya telah menerapkan gaya border serta borderRadius ke dalamnya

<img/>

1

6. Tambahkan Atribut ID ke Gambar di JavaScript

Menambahkan beberapa gaya ke elemen gambar satu per satu akan membosankan

Sebagai gantinya, mari buat aturan CSS baru di dalam tag gaya atau file CSS eksternal dengan pemilih ID seperti di bawah ini

<img/>

2

Kemudian, tetapkan ke atribut ID dari elemen gambar menggunakan properti ID-nya

<img/>

_3

Seperti yang Anda ketahui, ini cukup mudah karena nilai atribut ID tidak boleh digandakan dalam satu halaman

Sebagai alternatif, Anda dapat memanggil metode

img["src"] = "https://picsum.photos/200/301";

_5 pada objek

img["src"] = "https://picsum.photos/200/301";

6 dengan dua argumen. nama atribut dan nilai

<img/>

_4

7. Tambahkan Atribut Kelas ke Gambar di JavaScript

Berbeda dengan atribut ID, Anda dapat menambahkan beberapa nama kelas dalam satu elemen gambar atau nama kelas yang sama dalam beberapa elemen gambar atau kombinasi keduanya

Katakanlah kita memiliki aturan CSS dengan nama kelas yang disebut. img-rounded-border

<img/>

5

Kemudian, kita bisa menambahkan kelas ini ke elemen gambar menggunakan metode add() pada properti classList dengan meneruskan nama kelas sebagai argumen

<img/>

_6

Jika Anda ingin menambahkan kelas lain ke elemen gambar yang sama, Anda harus menggunakan metode add() lagi

<img/>

_7

Sebagai alternatif, Anda dapat menggunakan metode setAttribute() untuk menambahkan satu atau beberapa atribut kelas ke elemen gambar dalam satu baris

<img/>

_8

Saat Anda menggunakan setAttribute, semua kelas sebelumnya yang ditambahkan ke elemen akan disetel ulang

8. Lampirkan Acara Klik ke Elemen Gambar

Untuk melampirkan peristiwa klik ke elemen gambar, aktifkan metode addEventListener() pada objek img

Ini akan membutuhkan dua argumen

klik = nama acara dan
function() {} = fungsi panggilan balik

<img/>

_9

9. Alihkan Pemilih CSS Saat Gambar Diklik

Katakanlah Anda ingin menambah dan menghapus batas gambar saat pengguna mengkliknya menggunakan kelas. img-rounded-border

<img/>

5

Yang harus Anda lakukan adalah memanggil metode toggle() dengan meneruskan nama kelas sebagai argumen pada properti classList di dalam fungsi panggilan balik peristiwa klik

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_1

Alternatifnya, objek acara yang diteruskan ke fungsi panggilan balik dapat digunakan untuk mengakses elemen gambar untuk menambah atau menghapus kelas

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_2

10. Dapatkan Item Gambar yang Dipilih Saat Diklik

Kita bisa mendapatkan informasi apa pun tentang item yang dipilih menggunakan objek event yang diteruskan ke fungsi callback seperti yang saya sebutkan sebelumnya

Katakanlah Anda ingin mendapatkan url gambar yang dipilih

Menggunakan e. target. src, Anda dapat dengan mudah mendapatkan URL gambar yang merupakan nilai dari atribut src

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_3

11. Buat Banyak Gambar dalam JavaScript

Katakanlah kita ingin membuat 10 gambar secara dinamis

Pertama, ulangi 10 kali menggunakan for loop

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_4

Kemudian, buat elemen gambar di dalam loop dan atur atribut src dengan url gambar acak dari picsum

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_5

Tambahkan semua 10 gambar ke elemen body

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

6

Mari beri jarak di antara gambar.

Buat aturan CSS baru di dalam tag gaya atau file CSS eksternal

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_7

Kemudian, tambahkan ke elemen gambar di dalam loop menggunakan metode add()

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_8

12. Gaya Bersyarat dalam Gambar Lingkaran

Mari ubah gambar tertentu dengan gaya yang berbeda

Mari ubah properti borderRadius untuk item ke-6 menggunakan kondisi if

const img = document.querySelector("img"); 
img.src = "https://picsum.photos/200/301";

_9

13. Tambahkan Peristiwa Klik ke Semua Gambar

Lampirkan metode addEventListener() ke elemen img pada setiap iterasi yang memerlukan dua argumen

klik = nama acara dan
function() {} = fungsi panggilan balik

Pastikan untuk menggunakan let alih-alih var di header for loop saat mendeklarasikan variabel i untuk menghindari pengangkatan yang merupakan salah satu masalah umum yang akan Anda alami saat menangani peristiwa klik di dalam loop seperti ini

Untuk mempelajari lebih lanjut tentang mengangkat, lihat blog saya yang lain
Menambahkan Click Event Listeners Dalam Sebuah Loop Di JavaScript

img["src"] = "https://picsum.photos/200/301";

0

14. Terapkan Kelas CSS Hanya Untuk Gambar yang Diklik

Karena saya telah menambahkan kelas img-margin ke setiap elemen img, itu akan memberi ruang di antara gambar pada pemuatan awal

img["src"] = "https://picsum.photos/200/301";

1

Ketika elemen img diklik, kelas img-rounded-border akan ditambahkan ke elemen tersebut yang akan menunjukkan batas tebal berwarna merah di sekelilingnya

Bagus

Tetapi bagaimana jika kita ingin menambahkan kelas img-rounded-border hanya ke elemen gambar yang dipilih dan tidak ke yang lainnya?

Salah satu solusi untuk memperbaikinya adalah dengan menghapus. img-rounded-border dari semua gambar terlebih dahulu sebelum menambahkannya ke gambar yang diklik

img["src"] = "https://picsum.photos/200/301";

2

Bekerja dengan gambar dalam JavaScript selalu menyenangkan. Saya harap Anda menikmati tutorial dari 14 skenario umum yang bekerja dengan gambar ini.

Saya tahu ada lebih banyak skenario daripada ini. Tolong beri tahu saya jika Anda ingin saya menambahkan sesuatu ke tutorial ini

Bagaimana cara memasukkan gambar ke dalam array di JavaScript?

Array of Images With Image() Constructor . // Buat HTMLImageElement biarkan myImage = new Image(width, height); . Create HTMLImageElement let myImage = new Image(width, height); You can then assign HTMLImageElement properties , like the src attribute, to it: // Create HTMLImageElement let myImage = new Image(width, height); // Assign it an src attribute myImage.

Bagaimana cara menyisipkan gambar dalam JavaScript?

Diberi elemen HTML dan tugasnya adalah membuat elemen .

Buat elemen img kosong menggunakan dokumen. metode createElement()

Kemudian atur atributnya seperti (src, height, width, alt, title, dll)

Terakhir, masukkan ke dalam dokumen

Bisakah Anda menambahkan objek ke array?

Tetapi Anda mungkin bertanya-tanya bagaimana cara menambahkan elemen ke lokasi tertentu di dalam larik. Nah, Anda bisa melakukannya dengan metode splice() . Metode splice() adalah metode tujuan umum untuk mengubah isi array dengan menghapus, mengganti, atau menambahkan elemen pada posisi tertentu dari array.