-1

I want to link downloadable content on my documentation and I tried putting in a link like this:

<a
  href={
    require("@site/static/img/04-api/01/API-Description.png")
      .default
  } download="file-name"
>  download </a>

This generates following html:

<a download="file-name" href="/assets/images/API-Description-6aeb65d8ae136a70b1b5a3d916d27ca0.png">  download </a>

<a download="file-name" href="/assets/images/API-Description-6aeb65d8ae136a70b1b5a3d916d27ca0.png">  download </a>

When I click on the link, I get

"Page Not Found"

I am running version: 2.0.0-beta.17

Vega
  • 27,856
  • 27
  • 95
  • 103
S4co
  • 31
  • 6

2 Answers2

0

I found two of doing this.

First, put the file inside the static folder.
Example: ./static/image.png.

1) Your way

<a href={ require("/image.png").default }>download</a>

2) Simple way

[download](/image.png)

** Note that we did not use the ! to indicate that is an image.

D.Kastier
  • 2,640
  • 3
  • 25
  • 40
  • 1
    I tried it again with you both of your ways, sadly it's still not working. Same error: "Page Not Fount". Is there maybe some configuration i must do beforehand, so docusaurus is even able to make something downloadable? – S4co Mar 07 '22 at 12:20
  • Try to clear the cache: 1) stop the docusaurus service. 2) Open the terminal in the folder of your website. 3) Run `npx docusaurus clear`. 4) Start the docusaurus service. – D.Kastier Mar 07 '22 at 13:03
  • Also, I simplified the example. Insert an image inside the `static` folder, then use the example to see if any change happens. Also, note that in the second example there is no `"` delimiting the image's path. – D.Kastier Mar 07 '22 at 13:05
  • It still didnt work. But i figured it out. I just had to add target="_blank" and **download** to the inline html – S4co Mar 08 '22 at 09:45
  • Good to known! I suggest that you post your solution as an `Answer`, and accept it. It could helps others in the future. – D.Kastier Mar 08 '22 at 11:27
  • 1
    Oh okay, I will do that. I am still quite new to Stackoverflow :D – S4co Mar 09 '22 at 12:13
0

You had to use inline-html with the download attribute and target="_blank"

[not working](/logo.png)

<a href={ require("/logo.png").default } download={"origName"}>not working</a>

<a target="_blank" href={ require("/logo.png").default } download>working</a>
Vega
  • 27,856
  • 27
  • 95
  • 103
S4co
  • 31
  • 6