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

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

What is the reason for having two plugin declarations within the galleriffic.js file?

implementing a feature to save and showcase a list of preferred names using jquery/ajax without the

AngularJS dropdown not reflecting changes when using ng-selected

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Angular appends "string:" in front of value when using ng-options

Switching images with the hover effect using jQuery

Adjusting Classes in JavaScript with jQuery

Receiving CORS response from the server for just one of the two API calls

Managing consecutive synchronous side effects that are dependent on each other using React hooks

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Avoid automatic scrolling when moving between tabs with varying lengths in Bootstrap Tabs

Ways to delete a property from an element that was originally included with jquery

The automated test locator in Angular using Protractor is failing to function

Filtering data in Laravel can be efficiently achieved by utilizing Laravel's ORM hasmany feature in conjunction with Vue

Validating group radio buttons that have been checked

Error encountered with Jest: SyntaxError - React Navigation - Unexpected export token found in [node_modules eact-navigationsrc eact-navigation.js:1]

IE11 experiences frequent crashes when running a web application utilizing the Kendo framework and JavaScript

Can you explain the significance of this HTML code?

Exploring the capabilities of SVG and audio integration in web browsers