Noob webdeveloper here.

I'm trying to download an image from an url on click. But when I use the image url as my href it just redirects to that url instead of downloading. Of course I am using the download attribute. I have tried my own code and also mulitple code blocks from other people. But all of them just redirect. I am using google chrome.

My code:

<a href = ".jpeg" download="car" id="downloadQRCodeButtonHref">
   <p>download</p>
</a>

Code I used from someone else 1(accepted answer):

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
   <img alt="ImageName" src="/path/to/image">
</a>

Code I used from someone else 2:

 <p> Click the image ! You can download! </p>
<?php
$image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
//echo $image;
?>
<a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
    <img alt="logo" src="http://localhost/sc/img/logo.png">
</a>

Some help will be appreciated. I might just be a big dum dum and overlook something extremely obvious.

Noob webdeveloper here.

I'm trying to download an image from an url on click. But when I use the image url as my href it just redirects to that url instead of downloading. Of course I am using the download attribute. I have tried my own code and also mulitple code blocks from other people. But all of them just redirect. I am using google chrome.

My code:

<a href = "https://autoooo.nl/wp-content/uploads/2018/12/F5144B9C-2B27-4070-828E-2361EBD702EF-400x400.jpeg" download="car" id="downloadQRCodeButtonHref">
   <p>download</p>
</a>

Code I used from someone else 1(accepted answer):

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
   <img alt="ImageName" src="/path/to/image">
</a>

Code I used from someone else 2:

 <p> Click the image ! You can download! </p>
<?php
$image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
//echo $image;
?>
<a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
    <img alt="logo" src="http://localhost/sc/img/logo.png">
</a>

Some help will be appreciated. I might just be a big dum dum and overlook something extremely obvious.

• javascript
• php
• jquery
• html

• is this your answer stackoverflow.com/a/724449/12232340 ? – user1805543 Commented Mar 4, 2020 at 9:45
• This downloads an image from an already existing php page with the image on it. I want to download an image from an url. But it might come in handy. Thanks. – Arjen Commented Mar 4, 2020 at 9:55
• Related question Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download? – kirogasa Commented Feb 26, 2023 at 12:33

1 Answer 1

The problem is because you're using a cross-domain URL. From the documentation for the download attribute:

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

To fix this you need to host the image on the same domain as the parent site.