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.
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.
Open OneDrive and locate the image you want to use on the webpage.
Embed Option. Right-click on the image and select the Tab
Generate button to generate an HTML CODE for embedding this photo. On the right, click the
Select your desired image size from the Image Size dropdown menu.
Then copy the content from the Copy the URL to embed the image section.
The content looks something like this:
Now go to your Html page and insert the above link inside the img src tag, as shown below.
<img class="js-lazy-image" data-src="https://bl3302files.storage.live.com/y4ms2OK2E4E3WMXD9TYQ9wc_qGRcBrB5UxH2AKk3E05TBlV-
Save it and click on this HTML page, and there you will get the image.
Method 2 Using Copy Image Address Option
To preview the image, Click on it.
Then, right-click on the image and select Copy Image Address.
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.
In this way, we can embed images from One Drive into our websites or HTML pages.