Adding a PDF to a Webpage

Part 3 of Building My Website

While making my website I thought about displaying my certificate from Flatiron School as a way of showing of credentials and as a part of my accomplishments.

Only problem is it can’t be displayed like normal images in jpeg or png format and I got an error when I tried to just import the pdf file and display it in an image tag.

A quick search provided the simple solution I needed, with no other installing in react needed. What’s needed in an Object tag:

which will create a on the webpage that will look like this:

The way I interpreted this syntax is that a new type of tag, much like a <img> tag, is needed, which in this case is an <object> tag. And rather than a “src,” attribute, you’ll need “data,” along with the “type,” which will be the format of the data which in this case is: “application/pdf.”

The <object> tag can be used for display images and videos as well, so long as the proper “type,” attribute is used. Should I decide to use this to display my video demos of my projects, I’ll dig a lot more deeper into the attributes available.