• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

255
Views
Download Images from image url stored in array with javascript or best alternative

Hey everyone I am trying to download images I have displayed on my react app. The app gets images from an API and displays them on the webpage and also stores the img src in an array. I'm trying to make a download button that will loop through my src array and download all images displayed and need some guidance. I have read many previous posts and realized I am not able to use cURL within my react app and the fetch API does not download the images. I'm trying to see if there is a way to do this with Javascript or is there a simple alternative with another programming language. Thank you for your help!

const downloadAll = () => {
        const imgArr = document.querySelectorAll('img');
        for (let i = 0; i < imgArr.length; i++) {
            let a = imgArr[i].src;
        }
    };

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Using the download attribute of an anchor should do the trick...

EDIT

download only works for same-origin URLs, or the blob: and data: schemes. ref

Since this is not your case, you will have to create a blob with each image and fortunately, that is easy with the fetch API.

const downloadAll = async () => {
  // Create and append a link
  let link = document.createElement("a");
  document.documentElement.append(link);

  const imgArr = document.querySelectorAll("img");
  for (let i = 0; i < imgArr.length; i++) {
    await fetch(imgArr[i].src)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {

        let objectURL = URL.createObjectURL(blob);

        // Set the download name and href
        link.setAttribute("download", `image_${i}.jpg`);
        link.href = objectURL;

        // Auto click the link
        link.click();
    })
  }
};

Tested on CodePen.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error