How to get all image urls from a web page using javascript?

Question

There are couple of ways to load image src urls using javascript, like using document.images or by selecting all img tags and get srcs.

However I can't figure out a way to image urls used within css.

For example, if the webpage has following css code, it loads bg.png, but I can't get that url using methods I mentioned above.

.bg {
  background-image: url('bg.png');
}

Anyone has an idea how to get all these urls used within css?

Use getComputedStyle. Will it help you? - stackoverflow.com/questions/2104149/… — s.kuznetsov
– s.kuznetsov, Commented Jan 21, 2021 at 22:26
@evolutionxbox is it possible to access every individual stylesheet rules? — emil
– emil, Commented Jan 21, 2021 at 22:28
@emil, but you can iterate over all the elements using the forEach() method or the for loop + the method to which I gave you the link. — s.kuznetsov
– s.kuznetsov, Commented Jan 21, 2021 at 23:19
one other idea - the Resource Timing API collects data on outbound requests. Perhaps depending on your application you could use that to parse outbound image requests? that will catch everything mind, not just bg images but inline ones as well. calendar.perfplanet.com/2012/… — Squiggs.
– Squiggs., Commented Jan 22, 2021 at 9:32

Squiggs. · Accepted Answer · 2021-01-22 16:30:29Z

The Resource Timing API collects data on outbound requests, should leave capacity to collect images in both CSS and inline styles performantly.

Haven't tested this, but something akin to this should help you get started:

if ( !('performance' in window) ||
                 !('getEntriesByType' in window.performance) ||
                 !(window.performance.getEntriesByType('resource') instanceof Array)
                 ) {
                      alert('unsupported');
         } else {
            window.addEventListener('load', function() {
               var resources = window.performance.getEntriesByType('resource');
               for(var index in resources) {

                  for(var properties in resources[index]) {
                      console.log(properties);
                      console.log(resources[index][properties]);
                  }
                
               }
            });

Squiggs. · Accepted Answer · 2021-01-21 22:39:08Z

1

something like this:

Loop all stylesheet rules
grab the document element from the stylesheet
find the background Image

var sSheetList = document.styleSheets;
    for (var sSheet = 0; sSheet < sSheetList.length; sSheet++)
    {
        var ruleList = document.styleSheets[sSheet].cssRules;
        for (var rule = 0; rule < ruleList.length; rule ++)
        {
           if (rule.style.cssText.match(/background/)) {
           var selectorText = ruleList[rule].selectorText );
           var img = document.getElementsByClassName(selectorText);
           var style = img.currentStyle || window.getComputedStyle(img, false);
           if( style.backgroundImage ) {
               var bg = style.backgroundImage.slice(4, -1).replace(/"/g, "");
 //add to array here or whatever.
           }
           }
          
        }
    }

edited Jan 21, 2021 at 22:39

answered Jan 21, 2021 at 22:30

Squiggs.

4,5028 gold badges57 silver badges95 bronze badges

1 Comment

emil Over a year ago

Thanks for your answer @Squiggs. I think you can't get rules if stylesheets is external though.

Collectives™ on Stack Overflow

How to get all image urls from a web page using javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related