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


👤 Diwas Poudel    🕒 Oct 16 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.

Corrutped Image Icon
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.

Embed Option OneDrive
fig. Embed Option OneDrive

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.

Generate Button
fig. Generate Button

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

Copy Url Link
fig. Copy Url Link

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.

Click on Copy Image Address
fig. Click on 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.

 

👊 MORE FROM OURTECHROOM 👊



Ourtechroom Main Logo
Hello and thank you for visiting Ourtechroom.com! We'll talk about everything from how to troubleshoot tech issues, to emerging technology, games, gadgets, and fun facts about technology.
Contact : ourtechroom777@gmail.com