EN
JavaScript - get src of all images on web page
0
points
In this article, we would like to show you how to get src of all images on web page using JavaScript.
Quick solution:
const findImages = () => {
const urls = [];
for (const image of document.images) {
urls.push(image.src);
}
return urls;
};
or:
const findImages = () => {
const images = document.querySelectorAll('img');
const urls = [];
for (const image of images) {
urls.push(image.src);
}
return urls;
}
Practical examples
1. Using document.images property
In this example, we use document.images property to get a collection of the images in the current HTML document. Then we iterate the collection using for...of loop to get src of all images.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<!-- Image 1: dirask logo -->
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<script>
var images = document.images;
function findImages() {
var urls = [];
for (var i = 0; i < images.length; ++i) {
urls.push(images[i].src);
}
return urls;
}
// Usage example:
window.addEventListener('load', function() {
console.log(findImages());
});
</script>
<!-- Image 2: JavaScript logo -->
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>
2. Using querySelectorAll() method
In this example, we use querySelectorAll() method to get the collection of all images on the web page. Then using for loop we create array of src properties of all images.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<!-- Image 1: dirask logo -->
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<script>
function findImages() {
var images = document.querySelectorAll('img');
var urls = [];
for (var i = 0; i < images.length; ++i) {
urls.push(images[i].src);
}
return urls;
}
// Usage example:
window.addEventListener('load', function() {
console.log(findImages());
});
</script>
<!-- Image 2: JavaScript logo -->
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>
Note:
The
findImages()function needs to be executed after windowloadevent or at the end of the script to make sure that all items are loaded before the function execution.