How do I use One Drive images in HTML and websites?

👤 Diwas Poudel 🕒 16 Oct 2022 📁 TECH

Microsoft's OneDrive is a popular internet-based file storage platform. You can save various types of content in One drive such as images, videos, pdfs, docs, and so on.

You may believe that using a Copy image URL from One Drive into an HTML page's img src tag is enough to preview it in HTML, but this is not the case. In this case, you may encounter the corrupted image icon shown below.

fig. Corrupted Image

So, in Onedrive, we must do things differently. So, let's take a look at those methods for uploading images from OneDrive to a website.

Method 1 Using Embed Option

Using the embed option, we can add images, pdfs, videos, and other documents to our website. We will only look at Images in this section.

Steps:

1 Open OneDrive and locate the image you want to use on the webpage.

2 Right-click on the image and select the Tab Embed Option.

3 On the right, click the Generate button to generate an HTML CODE for embedding this photo.

4 Select your desired image size from the Image Size dropdown menu.

5 Then copy the content from the Copy the URL to embed the image section.

The content looks something like this:

https://bl3302files.storage.live.com/y4ms2OK2E4E3WMXD9TYQ9wc_qGRcBrB5UxH2AKk3E05TBlV-NrSq4XjQPTgXRgI8maCk8TpE6AjWlr-uxMdGQ1PHPSz9uVPvDLPTs3NZSm2NEnZmrRcmE3azOL8MywtI1ogO963ST0QXKIxRcch3NUOqMI_Iu3Sz8fPmbDej28Zp-I602S6y-8QX_oFf18qxyTQ?width=1213&height=1497&cropmode=none

6 Now go to your Html page and insert the above link inside the img src tag, as shown below.

Img src in html — **fig. One Drive image in Html**

<img class="js-lazy-image" data-src="https://bl3302files.storage.live.com/y4ms2OK2E4E3WMXD9TYQ9wc_qGRcBrB5UxH2AKk3E05TBlV-
NrSq4XjQPTgXRgI8maCk8TpE6AjWlr-uxMdGQ1PHPSz9uVPvDLPTs3NZSm2NEnZmrRcmE3azOL8MywtI1ogO963ST0QXKIxRcch3NUOqMI_
Iu3Sz8fPmbDej28Zp-I602S6y-8QX_oFf18qxyTQ?width=1213&height=1497&cropmode=none" alt="">

7 Save it and click on this HTML page, and there you will get the image.

One Drive Image in Html Page — **fig. Final Output of OneDrive Image in Html Page or Webpage**

📚 Note that if you do not find an embed option you can try the second method.

Method 2 Using Copy Image Address Option

1 To preview the image, Click on it.

Click On Image You want to preview — **fig. Click on the image you want to preview**

2 Then, right-click on the image and select Copy Image Address.

3 Then, on your HTML page, paste the copied image address inside the img src tag, as shown below.

It is possible for us to draw the conclusion that in both approaches, the image must have a URL that begins with something like files.storage.live.com this in order for us to effectively use it on an HTML page or a website.

Also read: How do I use a Google Drive image in HTML and on a website?

Conclusion:

In this way, we can embed images from One Drive into our websites or HTML pages.