How do Ilink to a pdf file in html?

Question

I am building a javascript app using vite js and I am having a problem linking an html file when I finally build and deploy the app to firebase. When I am in dev mode the code opens a new window and displays the pdf file normally ,however it wont show up when i finally build it...

<div id="link1"> <button id="button"><a class="pdf" href="assets/Hindes_Resume.pdf" target = "blank">Resume</a></button> </div>

Answer 1

The root cause of your issue is the path given to the href attribute of the anchor. ? You should use root absolute path.

As we do not have more details, I am assuming you have the assets directory in the public folder - something similiar to the following tree:

| public
|-- assets
|---- Hindes_Resume.pdf
| src
| package.json
...

Using absolute path : href="/assets/Hindes_Resume.pdf"

<div id="link1"> <button id="button"><a class="pdf" href="/assets/Hindes_Resume.pdf"  target = "blank">Resume</a></button> </div>

You can learn more about vite's static assets handling by reading the offical documentation.

OT Note:

• Also, as Quentin stated, you should not nest an a element into a button element, I suggest you to give a read to this answer: Can I nest a <button> element inside an <a> using HTML5?