Add images, videos, and files to OneNote pages

Applies to Consumer notebooks on OneDrive | Enterprise notebooks on Microsoft 365

You can use img, object, and iframe elements to add images, videos, and files to a OneNote page when you're creating or updating the page.

• Use img to render an image on the page.
• Use iframe to embed a video on the page.
• Use object to add a file attachment to the page.

Adding images

Images can be added by URL reference or by sending raw data. Microsoft Graph supports the following methods of adding images, logos, and photos to OneNote pages.

Add a public image from the web

Use img with src="https://image-url" and specify the URL of a publicly accessible image. Renders the image on the OneNote page.

Add an image using binary data

Use img with src="name:image-block-name" and send the image file in a data part of a multipart request. Renders the image on the OneNote page.

Add a webpage snapshot

Use img with data-render-src="https://webpage-url" and specify the URL of a webpage. Renders a snapshot of the whole webpage on the OneNote page.

Add an image rendered from HTML

Use img with data-render-src="name:html-block-name" and send HTML in the data part of a multipart request. Renders the HTML as an image on the OneNote page.

Add images of PDF file contents

Use and send the PDF file in the data part of a multipart request. Renders each PDF page as a separate image on the OneNote page.

Add an image file as a file attachment

Use object with data="name:file-block-name" data-attachment="file-name.file-ext" type="media-type" and send an image file in the data part of a multipart request. Adds a file attachment to the OneNote page and displays a file icon.

Image attributes

An img element can optionally include alt, height, and width attributes, and the style attributes max-width and max-height.

Image media types

Microsoft Graph supports TIFF, PNG, GIF, JPEG, and BMP image types. To capture an image that uses a different format that you don't want to convert, send the binary data in a multipart request. You don't need to use Base64 or otherwise encode the binary data that you send.

See limitations that apply when creating pages that contain media.

Add a public image from the web

In the input HTML of your request, include and specify the URL of a publicly accessible image for the src attribute.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html



  
    
    
  
  
    
This page displays an image from the web.
    
  


--MyAppPartBoundary--  

Add an image using binary data

In the input HTML of your request's Presentation part, include , where part-name is the unique identifier for the data part in your multipart request that contains the binary image data. Just send the binary data, don't use Base64 or otherwise encode it.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html



  
    
    
  
  
    
This page displays the uploaded image.
    
  


--MyAppPartBoundary
Content-Disposition: form-data; name="MyAppPictureId"
Content-Type: image/jpeg

... image binary data ...

--MyAppPartBoundary--  

Add a webpage snapshot

You can use Microsoft Graph to snapshot entire webpages and insert them into new pages. This method is useful to archive webpages or capture complex webpages that have features that OneNote doesn't support (like some CSS).

In the input HTML of your request, include and specify the URL of the webpage you want to insert for the src attribute.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html



  
    
    
  
  
    
This page displays an image of the webpage.
    
  


--MyAppPartBoundary--  

Add an image rendered from HTML

When you pass the HTML as a data-block, be sure there is no active content that would require user credentials, or a pre-loaded browser plug-in. The engine that Microsoft Graph uses to render the HTML page into an image has no ability to log in a user, and doesn't include plug-ins like Adobe Flash, Apple QuickTime, and so on. That also means that dynamically-loaded content, such as might come with an AJAX script, won't appear if getting the data requires user login credentials or cookies.

In the input HTML of your request's Presentation part, include , where part-name is the unique identifier for the data part in your multipart request that contains the HTML.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html



  
    
    
  
  
    
This page displays the block of HTML as an image.
    
  


--MyAppPartBoundary
Content-Disposition: form-data; name="html-block-name"
Content-Type: text/html



This HTML will render as an image
Don't try to embed another data-render-src type-image inside the HTML part--
it won't work. Instead, use URL-based real images like this:




--MyAppPartBoundary--  

Add an image file as an attachment

In the input HTML of your request's Presentation part, include