-(1).jpg)
Mobile Mastery: Transforming Work Habits with 8 iOS Productivity Techniques
🕤 07 Jan 2024 Read more
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.
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 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.
📚 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.
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.
Conclusion:
In this way, we can embed images from One Drive into our websites or HTML pages.
.png)
.jpg)
