What is the best way to extract all image URLs from a website using JavaScript?

Question

What is the best way to extract all image URLs from a website using JavaScript?

There are various methods to retrieve image src urls using JavaScript, such as utilizing document.images or by targeting all img elements and fetching their src attributes.

However, I am currently unable to extract the image urls specified within CSS styles.

For instance, consider a scenario where the webpage contains the following CSS snippet that loads bg.png, but it's challenging for me to capture that URL with the aforementioned approaches.

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

Does anyone know a solution to independently fetch all these URLs utilized inside CSS?

javascript html jquery css dom

Answer 1

Answer №1

The Resource Timing API is a powerful tool for collecting data on outbound requests, allowing you to efficiently gather information about images used in both CSS and inline styles.

While I have not personally tested the following code snippet, it can serve as a starting point for implementation:

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

Answer 2

The Resource Timing API is a powerful tool for collecting data on outbound requests, allowing you to efficiently gather information about images used in both CSS and inline styles.

While I have not personally tested the following code snippet, it can serve as a starting point for implementation:

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

Answer 3

Answer №2

Here are the steps to achieve this:

Iterate through all stylesheet rules
Retrieve the document element from the stylesheet
Locate the background image

var styleSheetList = document.styleSheets;
    for (var styleSheetIndex= 0; styleSheetIndex < styleSheetList.length; styleSheetIndex++)
    {
        var ruleList = document.styleSheets[styleSheetIndex].cssRules;
        for (var ruleIndex = 0; ruleIndex < ruleList.length; ruleIndex ++)
        {
           if (rule.style.cssText.match(/background/)) {
           var selectorText = ruleList[ruleIndex].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.
           }
           }
          
        }
    }

Answer 4

Here are the steps to achieve this:

Iterate through all stylesheet rules
Retrieve the document element from the stylesheet
Locate the background image

var styleSheetList = document.styleSheets;
    for (var styleSheetIndex= 0; styleSheetIndex < styleSheetList.length; styleSheetIndex++)
    {
        var ruleList = document.styleSheets[styleSheetIndex].cssRules;
        for (var ruleIndex = 0; ruleIndex < ruleList.length; ruleIndex ++)
        {
           if (rule.style.cssText.match(/background/)) {
           var selectorText = ruleList[ruleIndex].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.
           }
           }
          
        }
    }

What is the best way to extract all image URLs from a website using JavaScript?

Answer №1

Answer №2

Similar questions

The function of the React index key appears to be malfunctioning within the map function

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

The presence of Null is detected during the HTML parsing process

creation of cascading drop-down lists

Issues with Image Loading in Azure WebMatrix

Real-time chat system using PHP for one-on-one inquiries with server-sent events (not a group chat)

Tips on showcasing a nested array in Next.js or converting it into an object

Is there a way to implement word wrapping in li text without making any changes to its width

centered logo in a flexbox header

Strange occurrences with the IMG tag

Incorporating RFID reader functionality into a website

Exploring the depths of JSON using @attributes and @association in the realm of JavaScript and AngularJS

How to dynamically set a computed background image in Vue 2

Unable to trigger AJAX POST with jQuery click handler

CSS creates captivating image hover transitions with span elements

Update your MySQL database with ease by leveraging the power of AJAX through a dropdown menu

Which Express.js template allows direct usage of raw HTML code?

dividing an HTML string into individual variables using JavaScript

The functionalities of Google Maps are experiencing issues within AngularJS when utilizing the $route feature

Ways to modify the final sum exclusively for a single table