How to get all the image sources on a particular Page using Javascript

Question

I am using a simple script to find an image on a page and get its source.

function img_find() {
    var img_find2 = document.getElementsByTagName("img")[0].src;
    return img_find;
}

However when I go to write this function on my page it only finds the first image and then stops. What is the best way to have it print all of the image src's on the current page? Thanks!

"it only finds the first image" - `document.getElementsByTagName("img")[0]` mmm? — Andrey, Apr 27 '11 at 18:59
Yeah, It will fetch only one image src from a particular page even though there is multiple images on the page. — Chris, Apr 27 '11 at 19:00
@Andrey was trying to put your attention on the `[0]` which you have there to get the 1st item of the array. — BalusC, Apr 27 '11 at 19:04
When you call `document.getElementsByTagName("img")` you get an array of elements containing SRCs of all IMG elements, and then you get the first element's SRC by using this `[0]`. — Cipi, Apr 27 '11 at 19:04
you question is like this: I take first image on page (`[0]`), however it only finds the first image. — Andrey, Apr 27 '11 at 19:11

score 37 · Accepted Answer · answered Apr 27 '11 at 19:01

37

You indeed told the code to do so. Don't do that. Just tell it to loop over all images and push the src of each in an array and return the array with all srcs instead.

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }

    return imgSrcs;
}

answered Apr 27 '11 at 19:01

BalusC

992,635
352
3,478
3,452

Thanks for this BalusC but it didn't load any img src. – Chris Apr 27 '11 at 19:07
It should work fine if the document has images. Perhaps you're misinterpreting the return value? It returns an array. Or you're running it too early? Do it on `window.onload` or put the script at end of body, right before `
`.
– BalusC Apr 27 '11 at 19:16
Got it! One last thing: I use this to write the img urls on the page img_find = img_find(); document.write('test'+img_find); but it out puts the results like this http://www.domain.com/image.png,http://www.domain.com/image.png is there anyway to break them up? so maybe there is a break in between them. – Chris Apr 27 '11 at 19:22

score 1 · Answer 2 · edited Apr 16 '16 at 14:52

1

It may help you...

img=document.getElementsByTagName("img");
for(i=0; i<img.length; i++) {
    imgp = imgp + img[i].src + '<br/>'; 
}
document.write(imgp);

edited Apr 16 '16 at 14:52

Lukas Neumann

33
3

answered Jul 05 '14 at 17:17

Ashish Kumar

186
3

1

It would be helpful if you formatted your code correctly. – hmatt1 Jul 05 '14 at 17:36

score 0 · Answer 3 · answered Jan 19 '13 at 11:47

I searched the whole web for a solution to this, maybe this will help if someone else searches the same.

for(var i = 0; i< document.images.length; i++){
document.images[i].style.border = "1px solid #E0FDA6";
}

Meaning, search all images that have style tag (border in this example) and set all borders to E0FDA6 (useful to reset single highlighted images), but I guess it can be used for everything with style tag.

Rg, Anjanka

score 0 · Answer 4 · answered Sep 15 '20 at 19:26

To print on current page (replace content):

document.write(`<pre>${JSON.stringify(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src), null, 2)}</pre>`);

To save in array:

const imgs = Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src);

To just console dir/log directly:

console.dir(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));
console.log(Array.prototype.map.call(document.getElementsByTagName("img"), img => img.src));

score -1 · Answer 5 · answered Dec 02 '16 at 23:28

-1

Make it simple:

console.log(document.body.getElementsByTagName('img'));

answered Dec 02 '16 at 23:28

Sam

784
9
18

How to get all the image sources on a particular Page using Javascript

5 Answers5

Linked