ADF renderer (Preview) UI Kit component can't show pictures

Forge Forge UI Kit and Custom UI
1

Hi,
The pictures are always loading in the UI:

image
image539×607 4.38 KB

Refer to: https://developer.atlassian.com/platform/forge/ui-kit/components/adf-renderer/

Thanks,
YY1

2

Hey @YY1

Just checking, which module are you using the ADF renderer in? And are you using the media tag or the image tag?

From the docs at https://developer.atlassian.com/platform/forge/ui-kit/components/adf-renderer/ the renderer:

Only supports media hosted by Atlassian when used in a Confluence macro module. You can identify Atlassian hosted media nodes as they have an attrs.id property, instead of attrs.url

Would love more information so I can clarify how this should work!

Cheers
Mel

4

I used ADF render component in the Comment UI Kit component to read comments in my App.

5

You need to convert an attachment ID to the real image URL. It can be tricky because doc ADF can contain atlassian media ID ,which is not equal an attachment ID

import {traverse} from '@atlaskit/adf-utils/traverse';


traverse(doc, {
    media: node => {
      if (
        // some checks here
      ) {
        const id = node?.attrs?.id;

        const attachment = attachments.find(a => a.filename === id);

        node.attrs.type = 'external';

        node.attrs.url = attachment
          ? `${siteUrl}/rest/api/3/attachment/content/${attachment.id}`
          : 'https://example.com/no_media.jpeg';
      }
    },
  });