From bd34c1be449b30e56dcd37c71f557f239c6bb219 Mon Sep 17 00:00:00 2001
From: Marco <5818581+marcomura@users.noreply.github.com>
Date: Wed, 12 Feb 2025 10:33:45 -0800
Subject: [PATCH] Better fix image rendering in Jira Cloud tickets' description
 and comments (#105)

* better fix for images

* fix typo
---
 src/ipc/prActions.ts                          |  4 -
 src/lib/ipc/fromUI/startWork.ts               |  8 ++
 .../startwork/startWorkWebviewController.ts   | 45 ++++++++++
 .../atlascode/startwork/StartWorkPage.tsx     | 42 ++++++++-
 src/util/html.test.ts                         | 75 ----------------
 src/util/html.ts                              | 15 ----
 src/webviews/components/WebviewComponent.tsx  | 18 ++++
 .../issue/AbstractIssueEditorPage.tsx         | 23 +----
 .../components/issue/CommentComponent.tsx     |  5 +-
 .../components/issue/CreateIssuePage.tsx      |  4 +-
 .../components/issue/JiraIssuePage.tsx        | 87 +++----------------
 src/webviews/jiraIssueWebview.ts              |  4 +-
 12 files changed, 130 insertions(+), 200 deletions(-)
 delete mode 100644 src/util/html.test.ts
 delete mode 100644 src/util/html.ts

diff --git a/src/ipc/prActions.ts b/src/ipc/prActions.ts
index c8fd13c1..7b6bff3d 100644
--- a/src/ipc/prActions.ts
+++ b/src/ipc/prActions.ts
@@ -172,7 +172,3 @@ export interface GetImageAction extends Action {
     action: 'getImage';
     url: string;
 }
-
-export function isGetImage(a: Action): a is GetImageAction {
-    return (<GetImageAction>a).action === 'getImage';
-}
diff --git a/src/lib/ipc/fromUI/startWork.ts b/src/lib/ipc/fromUI/startWork.ts
index cb0c76cd..6a2968bc 100644
--- a/src/lib/ipc/fromUI/startWork.ts
+++ b/src/lib/ipc/fromUI/startWork.ts
@@ -9,12 +9,14 @@ export enum StartWorkActionType {
     ClosePage = 'closePage',
     StartRequest = 'startRequest',
     OpenSettings = 'openSettings',
+    GetImage = 'getImage',
 }
 
 export type StartWorkAction =
     | ReducerAction<StartWorkActionType.ClosePage, {}>
     | ReducerAction<StartWorkActionType.StartRequest, StartRequestAction>
     | ReducerAction<StartWorkActionType.OpenSettings, OpenSettingsAction>
+    | ReducerAction<StartWorkActionType.GetImage, GetImageAction>
     | CommonAction;
 
 export interface StartRequestAction {
@@ -31,3 +33,9 @@ export interface OpenSettingsAction {
     section?: ConfigSection;
     subsection?: ConfigSubSection;
 }
+
+export interface GetImageAction {
+    nonce: string;
+    url: string;
+    siteDetailsStringified: string;
+}
diff --git a/src/lib/webview/controller/startwork/startWorkWebviewController.ts b/src/lib/webview/controller/startwork/startWorkWebviewController.ts
index d1543bb6..3bc8d239 100644
--- a/src/lib/webview/controller/startwork/startWorkWebviewController.ts
+++ b/src/lib/webview/controller/startwork/startWorkWebviewController.ts
@@ -6,6 +6,8 @@ import { CommonActionType } from '../../../ipc/fromUI/common';
 import { StartWorkAction, StartWorkActionType } from '../../../ipc/fromUI/startWork';
 import { WebViewID } from '../../../ipc/models/common';
 import { CommonMessage, CommonMessageType } from '../../../ipc/toUI/common';
+// eslint-disable-next-line no-restricted-imports
+import { Container } from '../../../../container';
 import {
     BranchType,
     emptyStartWorkIssueMessage,
@@ -158,6 +160,49 @@ export class StartWorkWebviewController implements WebviewController<StartWorkIs
                 this.api.openSettings(msg.section, msg.subsection);
                 break;
             }
+            case StartWorkActionType.GetImage: {
+                try {
+                    const siteDetails = JSON.parse(msg.siteDetailsStringified);
+                    const baseApiUrl = new URL(
+                        siteDetails.baseApiUrl.slice(0, siteDetails.baseApiUrl.lastIndexOf('/rest')),
+                    );
+                    // Prefix base URL for a relative URL
+                    const href = msg.url.startsWith('/') ? new URL(baseApiUrl.href + msg.url) : new URL(msg.url);
+                    // Skip fetching external images (that do not belong to the site)
+                    if (href.hostname !== baseApiUrl.hostname) {
+                        this.postMessage({
+                            type: 'getImageDone',
+                            imgData: '',
+                            nonce: msg.nonce,
+                        } as any);
+                    }
+
+                    const url = href.toString();
+
+                    const client = await Container.clientManager.jiraClient(siteDetails);
+                    const response = await client.transportFactory().get(url, {
+                        method: 'GET',
+                        headers: {
+                            Authorization: await client.authorizationProvider('GET', url),
+                        },
+                        responseType: 'arraybuffer',
+                    });
+                    const imgData = Buffer.from(response.data, 'binary').toString('base64');
+                    this.postMessage({
+                        type: 'getImageDone',
+                        imgData: imgData,
+                        nonce: msg.nonce,
+                    } as any);
+                } catch (e) {
+                    this.logger.error(new Error(`error fetching image: ${msg.url}`));
+                    this.postMessage({
+                        type: 'getImageDone',
+                        imgData: '',
+                        nonce: msg.nonce,
+                    } as any);
+                }
+                break;
+            }
             case CommonActionType.Refresh: {
                 try {
                     await this.invalidate();
diff --git a/src/react/atlascode/startwork/StartWorkPage.tsx b/src/react/atlascode/startwork/StartWorkPage.tsx
index a006ddef..ef73ca0f 100644
--- a/src/react/atlascode/startwork/StartWorkPage.tsx
+++ b/src/react/atlascode/startwork/StartWorkPage.tsx
@@ -46,6 +46,11 @@ import { PrepareCommitTip } from '../common/PrepareCommitTip';
 import { StartWorkControllerContext, useStartWorkController } from './startWorkController';
 import { AtlascodeErrorBoundary } from '../common/ErrorBoundary';
 import { AnalyticsView } from 'src/analyticsTypes';
+import { RenderedContent } from '../../../webviews/components/RenderedContent';
+import { StartWorkAction, StartWorkActionType } from '../../../lib/ipc/fromUI/startWork';
+import { OnMessageEventPromise } from '../../../util/reactpromise';
+import { ConnectionTimeout } from '../../../util/time';
+import uuid from 'uuid';
 
 const useStyles = makeStyles((theme: Theme) => ({
     title: {
@@ -308,6 +313,33 @@ const StartWorkPage: React.FunctionComponent = () => {
         setTransition(inProgressTransitionGuess);
     }, [state.issue]);
 
+    const postMessageWithEventPromise = (
+        send: StartWorkAction,
+        waitForEvent: string,
+        timeout: number,
+        nonce?: string,
+    ): Promise<any> => {
+        controller.postMessage(send);
+        return OnMessageEventPromise(waitForEvent, timeout, nonce);
+    };
+
+    const fetchImage = async (url: string): Promise<any> => {
+        const nonce = uuid.v4();
+        return (
+            await postMessageWithEventPromise(
+                {
+                    type: StartWorkActionType.GetImage,
+                    nonce: nonce,
+                    url: url,
+                    siteDetailsStringified: JSON.stringify(state.issue.siteDetails),
+                },
+                'getImageDone',
+                ConnectionTimeout,
+                nonce,
+            )
+        ).imgData;
+    };
+
     return (
         <StartWorkControllerContext.Provider value={controller}>
             <AtlascodeErrorBoundary
@@ -380,10 +412,12 @@ const StartWorkPage: React.FunctionComponent = () => {
                                             </Grid>
                                         </Grid>
                                         <Grid item>
-                                            <Typography
-                                                variant="body2"
-                                                dangerouslySetInnerHTML={{ __html: state.issue.descriptionHtml }}
-                                            ></Typography>
+                                            {state.issue.siteDetails.baseApiUrl && (
+                                                <RenderedContent
+                                                    html={state.issue.descriptionHtml}
+                                                    fetchImage={(url) => fetchImage(url)}
+                                                />
+                                            )}
                                         </Grid>
                                         <Grid item>
                                             <Divider />
diff --git a/src/util/html.test.ts b/src/util/html.test.ts
deleted file mode 100644
index b0a62fdd..00000000
--- a/src/util/html.test.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as html from './html';
-
-describe('html util', () => {
-    describe('fix relative URLs in html', () => {
-        it('replaceRelativeURLsWithAbsolute correctly replaces the relative URL', () => {
-            const baseUrl = 'https://www.domain.com/path1/path2/path3';
-            const htmlText = '<p><label>/imgs/test.png</label><img src="/imgs/test.png" /></p>';
-
-            const expectedHtml =
-                '<p><label>/imgs/test.png</label><img src="https://www.domain.com/path1/path2/imgs/test.png" /></p>';
-
-            const fixedHtml = html.replaceRelativeURLsWithAbsolute(htmlText, baseUrl);
-            expect(fixedHtml).toBe(expectedHtml);
-        });
-
-        it('replaceRelativeURLsWithAbsolute correctly replaces all relative URLs', () => {
-            const baseUrl = 'https://www.domain.com/path1/path2/path3';
-            const htmlText =
-                '<p>' +
-                '<label>/imgs/test1.png</label><img src="/imgs/test1.png" />' +
-                '<label>/imgs/test2.png</label><img src="/imgs/test2.png" />' +
-                "<label>/imgs/test3.png</label><img src='/imgs/test3.png' />" +
-                "<label>/imgs/test4.png</label><img src='/imgs/test4.png' />" +
-                '</p>';
-
-            const expectedHtml =
-                '<p>' +
-                '<label>/imgs/test1.png</label><img src="https://www.domain.com/path1/path2/imgs/test1.png" />' +
-                '<label>/imgs/test2.png</label><img src="https://www.domain.com/path1/path2/imgs/test2.png" />' +
-                "<label>/imgs/test3.png</label><img src='https://www.domain.com/path1/path2/imgs/test3.png' />" +
-                "<label>/imgs/test4.png</label><img src='https://www.domain.com/path1/path2/imgs/test4.png' />" +
-                '</p>';
-
-            const fixedHtml = html.replaceRelativeURLsWithAbsolute(htmlText, baseUrl);
-            expect(fixedHtml).toBe(expectedHtml);
-        });
-
-        it("replaceRelativeURLsWithAbsolute doesn't replaces absolute URLs", () => {
-            const baseUrl = 'https://www.domain.com/path1/path2/path3';
-            const htmlText = '<p><label>/imgs/test.png</label><img src="https://www.domain.com/imgs/test.png" /></p>';
-
-            const fixedHtml = html.replaceRelativeURLsWithAbsolute(htmlText, baseUrl);
-            expect(fixedHtml).toBe(htmlText);
-        });
-
-        it("if there aren't relative URLs, nothing changes", () => {
-            const baseUrl = 'https://www.domain.com/path1/path2/path3';
-            const htmlText = '<p><label>hello</label></p>';
-
-            const fixedHtml = html.replaceRelativeURLsWithAbsolute(htmlText, baseUrl);
-            expect(fixedHtml).toBe(htmlText);
-        });
-
-        it('last segment of the path is ignored unless it ends with a /', () => {
-            const htmlText = '<img src="/imgs/test.png" />';
-
-            expect(html.replaceRelativeURLsWithAbsolute(htmlText, 'https://www.domain.com/path1/path2')).toBe(
-                '<img src="https://www.domain.com/path1/imgs/test.png" />',
-            );
-            expect(html.replaceRelativeURLsWithAbsolute(htmlText, 'https://www.domain.com/path1/path2/')).toBe(
-                '<img src="https://www.domain.com/path1/path2/imgs/test.png" />',
-            );
-        });
-
-        it('nullables are correctly handled', () => {
-            expect(html.replaceRelativeURLsWithAbsolute('', 'https://www.domain.com/')).toBe('');
-            expect(html.replaceRelativeURLsWithAbsolute(null!, 'https://www.domain.com/')).toBe(null);
-            expect(html.replaceRelativeURLsWithAbsolute(undefined!, 'https://www.domain.com/')).toBe(undefined);
-
-            expect(html.replaceRelativeURLsWithAbsolute('<p></p>', '')).toBe('<p></p>');
-            expect(html.replaceRelativeURLsWithAbsolute('<p></p>', null!)).toBe('<p></p>');
-            expect(html.replaceRelativeURLsWithAbsolute('<p></p>', undefined!)).toBe('<p></p>');
-        });
-    });
-});
diff --git a/src/util/html.ts b/src/util/html.ts
deleted file mode 100644
index 0ac20adb..00000000
--- a/src/util/html.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const regex1 = / src="\/[^"]+/g;
-const regex2 = / src='\/[^']+/g;
-
-export function replaceRelativeURLsWithAbsolute(renderedHtml: string, baseApiUrl: string): string | undefined {
-    if (!renderedHtml || !baseApiUrl) {
-        return renderedHtml;
-    }
-
-    // The regex is searching for anything starting with ' src="/' which is 7 chars long,
-    // and we need to get the relative URL without including its first /, so anything after those 7 characters.
-    // Therefore, substring(7).
-    return renderedHtml
-        .replace(regex1, (x) => ` src=\"${new URL(x.substring(7), baseApiUrl).href}`)
-        .replace(regex2, (x) => ` src=\'${new URL(x.substring(7), baseApiUrl).href}`);
-}
diff --git a/src/webviews/components/WebviewComponent.tsx b/src/webviews/components/WebviewComponent.tsx
index 8872c599..1597cba4 100644
--- a/src/webviews/components/WebviewComponent.tsx
+++ b/src/webviews/components/WebviewComponent.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { Action, LegacyPMFData } from '../../ipc/messaging';
 import { OnMessageEventPromise } from '../../util/reactpromise';
+import { ConnectionTimeout } from '../../util/time';
 import { darken, lighten, opacity } from './colors';
+import uuid from 'uuid';
 
 interface VsCodeApi {
     postMessage(msg: {}): void;
@@ -113,4 +115,20 @@ export abstract class WebviewComponent<A extends Action, R, P, S> extends React.
         this._api.postMessage(send);
         return OnMessageEventPromise(waitForEvent, timeout, nonce);
     }
+
+    protected async fetchImage(url: string): Promise<any> {
+        const nonce = uuid.v4();
+        return (
+            await this.postMessageWithEventPromise(
+                {
+                    action: 'getImage',
+                    nonce: nonce,
+                    url: url,
+                },
+                'getImageDone',
+                ConnectionTimeout,
+                nonce,
+            )
+        ).imgData;
+    }
 }
diff --git a/src/webviews/components/issue/AbstractIssueEditorPage.tsx b/src/webviews/components/issue/AbstractIssueEditorPage.tsx
index 3f6f0387..41ec2c85 100644
--- a/src/webviews/components/issue/AbstractIssueEditorPage.tsx
+++ b/src/webviews/components/issue/AbstractIssueEditorPage.tsx
@@ -40,7 +40,6 @@ import {
 } from '../../../ipc/issueMessaging';
 import { Action, HostErrorMessage, Message } from '../../../ipc/messaging';
 import { ConnectionTimeout } from '../../../util/time';
-import { replaceRelativeURLsWithAbsolute } from '../../../util/html';
 import { colorToLozengeAppearanceMap } from '../colors';
 import * as FieldValidators from '../fieldValidators';
 import * as SelectFieldHelper from '../selectFieldHelper';
@@ -372,7 +371,7 @@ export abstract class AbstractIssueEditorPage<
         }
     }, 100);
 
-    protected getInputMarkup(field: FieldUI, baseApiUrl: string, editmode: boolean = false): any {
+    protected getInputMarkup(field: FieldUI, editmode: boolean = false): any {
         switch (field.uiType) {
             case UIType.Input: {
                 let validateFunc = this.getValidateFunction(field, editmode);
@@ -402,12 +401,10 @@ export abstract class AbstractIssueEditorPage<
                     let markup: React.ReactNode = <p></p>;
 
                     if ((field as InputFieldUI).isMultiline) {
-                        const html = this.state.fieldValues[`${field.key}.rendered`] || undefined;
-                        const fixedHtml = replaceRelativeURLsWithAbsolute(html, baseApiUrl);
                         markup = (
                             <EditRenderedTextArea
                                 text={this.state.fieldValues[`${field.key}`]}
-                                renderedText={fixedHtml}
+                                renderedText={this.state.fieldValues[`${field.key}.rendered`]}
                                 fetchUsers={async (input: string) =>
                                     (await this.fetchUsers(input)).map((user) => ({
                                         displayName: user.displayName,
@@ -420,21 +417,7 @@ export abstract class AbstractIssueEditorPage<
                                 onSave={async (val: string) => {
                                     await this.handleInlineEdit(field, val);
                                 }}
-                                fetchImage={async (url: string) => {
-                                    const nonce = uuid.v4();
-                                    return (
-                                        await this.postMessageWithEventPromise(
-                                            {
-                                                action: 'getImage',
-                                                nonce: nonce,
-                                                url: url,
-                                            },
-                                            'getImageDone',
-                                            ConnectionTimeout,
-                                            nonce,
-                                        )
-                                    ).imgData;
-                                }}
+                                fetchImage={(img) => this.fetchImage(img)}
                             />
                         );
                     } else {
diff --git a/src/webviews/components/issue/CommentComponent.tsx b/src/webviews/components/issue/CommentComponent.tsx
index dd5824fe..c19698a6 100644
--- a/src/webviews/components/issue/CommentComponent.tsx
+++ b/src/webviews/components/issue/CommentComponent.tsx
@@ -12,13 +12,11 @@ import React, { useState } from 'react';
 import { DetailedSiteInfo } from '../../../atlclients/authInfo';
 import { RenderedContent } from '../RenderedContent';
 import { TextAreaEditor } from './TextAreaEditor';
-import { replaceRelativeURLsWithAbsolute } from '../../../util/html';
 
 type Props = {
     siteDetails: DetailedSiteInfo;
     comment: JiraComment;
     isServiceDeskProject: boolean;
-    baseApiUrl: string;
     fetchUsers: (input: string) => Promise<any[]>;
     onSave: (commentBody: string, commentId?: string, restriction?: CommentVisibility) => void;
     onDelete: (commentId: string) => void;
@@ -29,7 +27,6 @@ export const CommentComponent: React.FC<Props> = ({
     siteDetails,
     comment,
     isServiceDeskProject,
-    baseApiUrl,
     fetchUsers,
     onSave,
     onDelete,
@@ -40,7 +37,7 @@ export const CommentComponent: React.FC<Props> = ({
     const [isSaving, setIsSaving] = useState(false);
 
     const prettyCreated = `${formatDistanceToNow(parseISO(comment.created))} ago`;
-    const body = replaceRelativeURLsWithAbsolute(comment.renderedBody!, baseApiUrl) || comment.body;
+    const body = comment.renderedBody ? comment.renderedBody : comment.body;
     const type = isServiceDeskProject ? (comment.jsdPublic ? 'external' : 'internal') : undefined;
 
     if (editing && !isSaving) {
diff --git a/src/webviews/components/issue/CreateIssuePage.tsx b/src/webviews/components/issue/CreateIssuePage.tsx
index 671bb347..a78c0c2a 100644
--- a/src/webviews/components/issue/CreateIssuePage.tsx
+++ b/src/webviews/components/issue/CreateIssuePage.tsx
@@ -278,11 +278,11 @@ export default class CreateIssuePage extends AbstractIssueEditorPage<Emit, Accep
     };
 
     getCommonFieldMarkup(): any {
-        return this.commonFields.map((field) => this.getInputMarkup(field, this.state.siteDetails.baseApiUrl));
+        return this.commonFields.map((field) => this.getInputMarkup(field));
     }
 
     getAdvancedFieldMarkup(): any {
-        return this.advancedFields.map((field) => this.getInputMarkup(field, this.state.siteDetails.baseApiUrl));
+        return this.advancedFields.map((field) => this.getInputMarkup(field));
     }
 
     public render() {
diff --git a/src/webviews/components/issue/JiraIssuePage.tsx b/src/webviews/components/issue/JiraIssuePage.tsx
index db1b7173..cbfa6261 100644
--- a/src/webviews/components/issue/JiraIssuePage.tsx
+++ b/src/webviews/components/issue/JiraIssuePage.tsx
@@ -79,12 +79,12 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
     // TODO: proper error handling in webviews :'(
     // This is a temporary workaround to hopefully troubleshoot
     // https://github.com/atlassian/atlascode/issues/46
-    override getInputMarkup(field: FieldUI, baseApiUrl: string, editmode?: boolean, context?: String) {
+    override getInputMarkup(field: FieldUI, editmode?: boolean, context?: String) {
         if (!field) {
             console.warn(`Field error - no field when trying to render ${context}`);
             return null;
         }
-        return super.getInputMarkup(field, baseApiUrl, editmode);
+        return super.getInputMarkup(field, editmode);
     }
 
     getProjectKey = (): string => {
@@ -501,14 +501,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                             />
                         </Tooltip>
                     </div>
-                    <h2>
-                        {this.getInputMarkup(
-                            this.state.fields['summary'],
-                            this.state.siteDetails.baseApiUrl,
-                            true,
-                            'summary',
-                        )}
-                    </h2>
+                    <h2>{this.getInputMarkup(this.state.fields['summary'], true, 'summary')}</h2>
                 </div>
                 {this.state.isErrorBannerOpen && (
                     <ErrorBanner onDismissError={this.handleDismissError} errorDetails={this.state.errorDetails} />
@@ -523,12 +516,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                 {this.state.fields['description'] && (
                     <div className="ac-vpadding">
                         <label className="ac-field-label">{this.state.fields['description'].name}</label>
-                        {this.getInputMarkup(
-                            this.state.fields['description'],
-                            this.state.siteDetails.baseApiUrl,
-                            true,
-                            'description',
-                        )}
+                        {this.getInputMarkup(this.state.fields['description'], true, 'description')}
                     </div>
                 )}
                 {this.state.fields['attachment'] &&
@@ -540,21 +528,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                                 baseLinkUrl={this.state.siteDetails.baseLinkUrl}
                                 onDelete={this.handleDeleteAttachment}
                                 attachments={this.state.fieldValues['attachment']}
-                                fetchImage={async (url: string) => {
-                                    const nonce = uuid.v4();
-                                    return (
-                                        await this.postMessageWithEventPromise(
-                                            {
-                                                action: 'getImage',
-                                                nonce: nonce,
-                                                url: url,
-                                            },
-                                            'getImageDone',
-                                            ConnectionTimeout,
-                                            nonce,
-                                        )
-                                    ).imgData;
-                                }}
+                                fetchImage={(img) => this.fetchImage(img)}
                             />
                         </div>
                     )}
@@ -564,12 +538,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                     this.state.fieldValues['environment'].trim() !== '' && (
                         <div className="ac-vpadding">
                             <label className="ac-field-label">{this.state.fields['environment'].name}</label>
-                            {this.getInputMarkup(
-                                this.state.fields['environment'],
-                                this.state.siteDetails.baseApiUrl,
-                                true,
-                                'environment',
-                            )}
+                            {this.getInputMarkup(this.state.fields['environment'], true, 'environment')}
                         </div>
                     )}
 
@@ -585,12 +554,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                     !this.state.isEpic &&
                     !this.state.fieldValues['issuetype'].subtask && (
                         <div className="ac-vpadding">
-                            {this.getInputMarkup(
-                                this.state.fields['subtasks'],
-                                this.state.siteDetails.baseApiUrl,
-                                true,
-                                'subtasks',
-                            )}
+                            {this.getInputMarkup(this.state.fields['subtasks'], true, 'subtasks')}
                             <IssueList
                                 issues={this.state.fieldValues['subtasks']}
                                 onIssueClick={this.handleOpenIssue}
@@ -599,12 +563,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                     )}
                 {this.state.fields['issuelinks'] && (
                     <div className="ac-vpadding">
-                        {this.getInputMarkup(
-                            this.state.fields['issuelinks'],
-                            this.state.siteDetails.baseApiUrl,
-                            true,
-                            'issuelinks',
-                        )}
+                        {this.getInputMarkup(this.state.fields['issuelinks'], true, 'issuelinks')}
                         <LinkedIssues
                             issuelinks={this.state.fieldValues['issuelinks']}
                             onIssueClick={this.handleOpenIssue}
@@ -631,33 +590,13 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                                     this.state.fieldValues['project'].projectTypeKey === 'service_desk'
                                 }
                                 comment={comment}
-                                baseApiUrl={this.state.siteDetails.baseApiUrl}
                                 fetchUsers={this.fetchUsers}
                                 onSave={this.handleUpdateComment}
                                 onDelete={this.handleDeleteComment}
-                                fetchImage={async (url: string) => {
-                                    const nonce = uuid.v4();
-                                    return (
-                                        await this.postMessageWithEventPromise(
-                                            {
-                                                action: 'getImage',
-                                                nonce: nonce,
-                                                url: url,
-                                            },
-                                            'getImageDone',
-                                            ConnectionTimeout,
-                                            nonce,
-                                        )
-                                    ).imgData;
-                                }}
+                                fetchImage={(img) => this.fetchImage(img)}
                             />
                         ))}
-                        {this.getInputMarkup(
-                            this.state.fields['comment'],
-                            this.state.siteDetails.baseApiUrl,
-                            true,
-                            'comment',
-                        )}
+                        {this.getInputMarkup(this.state.fields['comment'], true, 'comment')}
                     </div>
                 )}
             </div>
@@ -847,7 +786,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
             field && (
                 <div className="ac-vpadding" onClick={onClick}>
                     <label className="ac-field-label">{field.name}</label>
-                    {this.getInputMarkup(field, this.state.siteDetails.baseApiUrl, true, key)}
+                    {this.getInputMarkup(field, true, key)}
                 </div>
             )
         );
@@ -864,7 +803,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                 markups.push(
                     <div className="ac-vpadding">
                         <label className="ac-field-label">{field.name}</label>
-                        {this.getInputMarkup(field, this.state.siteDetails.baseApiUrl, true, `Advanced sidebar`)}
+                        {this.getInputMarkup(field, true, `Advanced sidebar`)}
                     </div>,
                 );
             }
@@ -906,7 +845,7 @@ export default class JiraIssuePage extends AbstractIssueEditorPage<Emit, Accept,
                 markups.push(
                     <div className="ac-vpadding">
                         <label className="ac-field-label">{field.name}</label>
-                        {this.getInputMarkup(field, this.state.siteDetails.baseApiUrl, true, `Advanced main`)}
+                        {this.getInputMarkup(field, true, `Advanced main`)}
                     </div>,
                 );
             }
diff --git a/src/webviews/jiraIssueWebview.ts b/src/webviews/jiraIssueWebview.ts
index 1450ef4a..7f86232a 100644
--- a/src/webviews/jiraIssueWebview.ts
+++ b/src/webviews/jiraIssueWebview.ts
@@ -918,8 +918,8 @@ export class JiraIssueWebview
                                 ),
                             );
                             // Prefix base URL for a relative URL
-                            const href = msg.url.startsWith('/secure/attachment')
-                                ? new URL(baseApiUrl + msg.url)
+                            const href = msg.url.startsWith('/')
+                                ? new URL(baseApiUrl.href + msg.url)
                                 : new URL(msg.url);
                             // Skip fetching external images (that do not belong to the site)
                             if (href.hostname !== baseApiUrl.hostname) {