Can't display issuetype icon with custom image

Forge Forge UI Kit and Custom UI
, , ,
3

First, I thank you very much for replying.

I don’t understand how can that help, considering I am not fetching external URLs. Let me explain step by step what I am doing:

  1. I use requestJira to get the contents of an issue via rest API. The returned payload has, among other things, the issue avatar and the corresponding icon URL.

The response payload is something like this:

{
  "key": "ISSUE-1",
  "fields": {
    "issuetype": {
      "iconUrl": "https://api.atlassian.com/ex/jira/<some id>/rest/api/2/universal_avatar/view/type/issuetype/avatar/10552?size=medium"
    }
  }
}

  1. When the issue type has a default icon (for example for issue type “task”), if I just use iconUrl directly on a “img” tag, it works flawlessly

  2. When the issue type has a custom image that I uploaded, the image won’t display. Further inspecting the network requests I see that the request for that image is forbidden (403).

That is not an external URL and I don’t get any CSP errors. In fact, I did some tests using requestJira to fetch that URL and it works, but it’s not that simple to display and image that was fetched by an Ajax invocation. I’m actually trying that, but with limited success. I’m trying something like this:

    public static async getImage(url: string):Promise<string> {
        let apiUrl = url.replace(/.*\/rest/,"/rest"); # here I'm just removing everything before "rest"

        let response = await requestJira(apiUrl, {})

        // @ts-ignore
        return response.blob().then(function(blob) {
            return ImageUtils.blobToBase64(blob).then(function(dataUrl) {
                return dataUrl
            })
        })
    }

export class ImageUtils {
    public static blobToBase64(blob:Blob):Promise<string> {
      return new Promise((resolve, _) => {
        const reader = new FileReader();
        // @ts-ignore
        reader.onloadend = () => resolve(reader.result);
        reader.readAsDataURL(blob);
      });
    }
}

This code actually works for the standard images (the ones I don’t care), but the payload returned for the custom image is somehow corrupted or has some kind of extra encoding I still didn’t figure out.

Anyway, that seems a lot of work just to display a simple issue type icon, which is why I still ask: is there a better way? Is there some standard function buried in the documentation that can ease all this work?