html - 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?

question from:https://stackoverflow.com/questions/65836625/how-to-get-all-image-urls-from-a-web-page-using-javascript

Answer 1

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]);
                  }
                
               }
            });