Html Question posted in
Some basic documentation can be found here.

Html – Attributes to array

What would be the best way to get the IMG SRC to an array such as:

var images = [ ‘img1.png’, ‘img2.png’, img3.png’ ];

<div class="cc">
<img class='content-image' src="./img1.png" alt="">
<img class='content-image' src="./img2.png" alt="">
<img class='content-image' src="./img3.png" alt="">
<img class='content-image' src="./img4.png" alt="">
<img class='content-image' src="./img5.png" alt="">
</div>

Have tried this:

var images = []; const interactImg2 = document.querySelector('.cc'); [...interactImg2.querySelectorAll('img[src]')].forEach(img => images.push(new Image('img[src]')));

Unable to get the SRC but the item shows as ( Image1, Image2, Image3 )

Tags:

6

Answers


  1. 0 
      var images = [];
  const interactImg2 = document.querySelector(".cc");
  [...interactImg2.querySelectorAll("img[src]")].forEach((img) =>
    images.push(img.getAttribute('src'))
  );

    Try this code. If you have any problem further, feel free to reach out me.

    Login or Signup to reply.
  2. 0 
    var images = [];
const interactImg2 = document.querySelector('.cc');
[...interactImg2.querySelectorAll('img[src]')].forEach(img => images.push(img.getAttribute('src')));
    Login or Signup to reply.
  3. 0

    You can use a compound CSS selector and a regexp to extract image file names. If you need full image paths, just return src without regexing.

    const images = [...document.querySelectorAll(".cc img[src]")].map(({src}) => src.match(/[^/]+$/)?.[0]);

console.log(images)
    <div class="cc">
  <img class='content-image' src="./img1.png" alt="">
  <img class='content-image' src="./img2.png" alt="">
  <img class='content-image' src="./img3.png" alt="">
  <img class='content-image' src="./img4.png" alt="">
  <img class='content-image' src="./img5.png" alt="">
</div>
    Login or Signup to reply.
  4. 0

    Use querySelectorAll to select all images and either a forEach loop or a map to create the array:

    const Images = document.querySelectorAll('.cc img');
let array = [];

Images.forEach(image => {
  array.push(image.src);
})

console.log(array);
    <div class="cc">
  <img class='content-image' src="./img1.png" alt="">
  <img class='content-image' src="./img2.png" alt="">
  <img class='content-image' src="./img3.png" alt="">
  <img class='content-image' src="./img4.png" alt="">
  <img class='content-image' src="./img5.png" alt="">
</div>
    Login or Signup to reply.
  5. 0

    Try this its 100% working

    var images = []; 
const interactImg2 = document.querySelector('.cc').children; 
let img;
for(let i = 0;i<interactImg2.length;i++){

img = interactImg2[i].getAttribute('src').substr(2);
images.push(img);
}
    Login or Signup to reply.
  6. 0

    Use the below code it also works:

    <html>
<body>
<div class="cc">
  <img class='content-image' src="./img1.png" alt="">
  <img class='content-image' src="./img2.png" alt="">
  <img class='content-image' src="./img3.png" alt="">
  <img class='content-image' src="./img4.png" alt="">
  <img class='content-image' src="./img5.png" alt="">
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');

var images = [];
var imgElements = document.getElementsByClassName('content-image');
for (var i = 0; i < imgElements.length; i++) {
console.log('img' + i + ' :: ', imgElements[i]);
images.push(imgElements[i].src);
}

console.log('img :: ', images);
});
</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search