HmiGuide
HmiGuide
·Posted in Smart HMI - WebIQ Designer and Server

How can I display the app icon received via ctrlX REST API in an HTML page?

I can retrieve the icon of a package e.g. via the ctrlX REST API call. But it's not a link to a file, it seems to be the content of the image file.
The question is: What do I have to do, that I can display this image in an HTML <img src=""> tag?

https://127.0.0.1:8443/package-manager/api/v1/packages/snap_rexroth-ide/icon

 

Best reply by HmiGuide

I got a solution:

  • tell axios to return a blob instead of a json
  • use FileReader object to convert blob to DataURL
jConfig = {
      headers: { authorization: 'Bearer ' + _sIdmToken },
      responseType: 'blob',
    }
jResp = await axios.get(`${sMgr}/packages/${AppsID}/icon`, jConfig)
blob2DataURL(jResp.data, setImg, img)
 
function blob2DataURL(blob, callback, img) {
  let fr = new FileReader()
  fr.onload = function (e) {
    callback(e.target.result, img)
  }
  fr.readAsDataURL(blob)
}

function setImg(dataURL, img) {
  img.src=dataURL
}

 

View original
5 replies