Skip to main content

Notifications

Business Central forum
Unanswered

how to display image from the call http:/picture/pictureContent into an img element

Posted on by
Hi,
I need to display the Item image on the screen. I am using the following call
 

https://api.businesscentral.dynamics.com/v2.0/<bla>/Production/api/v2.0/companies(bla)/items(bla)/picture/pictureContent 

 

I am getting back the image. But i am not sure of the image format (blob or b64 or binary etc). I need to display the image in an HTML img element.

 

New to BC. Pls help !

Thanks in advance

Prem

 

Categories:
  • gdrenteria Profile Picture
    gdrenteria 10,870 Most Valuable Professional on at
    how to display image from the call http:/picture/pictureContent into an img element
  • PhillipsB Profile Picture
    PhillipsB 31 on at
    how to display image from the call http:/picture/pictureContent into an img element
    Hi, 
    To display the image in <img> tag, try using JavaScript to get the image data with fetch. Convert the response to a blob and set it directly as the src for the <img> element.
     
    For example
    fetch("https://api.businesscentral.dynamics.com/v2.0/.../picture/pictureContent")
      .then(response => response.blob())
      .then(blob => {
          const url = URL.createObjectURL(blob);
          document.getElementById("yourImgElementId").src = url;
      })
      .catch(error => console.error("Error loading image:", error));
     
    This could work for most binary images returned by the API. If it’s already in base64 format, set it directly as the src
    html
    <img id="yourImgElementId" src="data:image/jpeg;base64, yourBase64String" />
     
    Hope it helps 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

November Spotlight Star - Khushbu Rajvi

Congratulations to a top community star!

Forum Structure Changes Coming on 11/8!

In our never-ending quest to help the Dynamics 365 Community members get answers faster …

Dynamics 365 Community Platform update – Oct 28

Welcome to the next edition of the Community Platform Update. This is a status …

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 290,888 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 229,247 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans