Unable to see images in arcgis-popup attachments in SDK 5

Question

Image attachments are not showing in popup from a secured service. but clicking the link opens the image in a different tab.

If the additional parameters w&s are removed from img src, the image is visible.

Is there any work around?

2026-03-05_14-41-33.png

2026-03-05_14-35-12.png

MKY · Answer

Is it possible to add a property to AttachmentQuery to control (disable) dynamic image resizing and scaling?

When using proxy and the w and s parameters prevent it from showing in the popup.

If there is a workaround, please post some samples

MKY · Answer

I have an asp .NET core proxy to handle secured services, and it works fine.  The proxy configuration has credentials. The problem happens on the widget too.

"allowedReferrers": [ "*" ],
 "tokenCacheMinutes": 59,
 "serverUrls": [
   {
     "url": "https://maps2.dcgis.dc.gov/dcgis/",
     "username": "ccccc",
     "password": "ccccc",
     "tokenUrl": "https://maps2.dcgis.dc.gov/dcgis/tokens/generateToken",
     "referer": "requestip",
     "useAppPoolIdentity": false
   }
}

I have a function to manually upload attachments.

private _uploadAttachment(feature: any) {
           //create form
            const attachmentForm = document.createElement("form");
            attachmentForm.setAttribute("id", "attachmentForm");
            attachmentForm.classList.add("esri-hidden");
            let fileSelector = document.createElement("input");
            fileSelector.setAttribute("id", "fileSelector");
            fileSelector.setAttribute("type", "file");
            fileSelector.setAttribute("name", "attachment");
            fileSelector.setAttribute("accept", "image/*,video/*,application/pdf,application/msword,text/plain");
            let entInput = document.createElement("input");
            entInput.setAttribute("name", "f");
            entInput.setAttribute("value", "json");
            attachmentForm.appendChild(fileSelector);
            attachmentForm.appendChild(entInput);
            document.body.appendChild(attachmentForm);
            document.getElementById('fileSelector')?.addEventListener("change", (e) => {
                let uploadedFile = (e.target as any).files[0];
                if (!uploadedFile) {
                    let message = "No file has been selected.";
                    this._errorDialogContent.innerHTML = message;
                    this._errorDialog.open = true;
                    return;
                }
                //examine file if there is a size requirement
                let result: any = this._validateUploadFile(uploadedFile);
                if (!result.isValidFile) {
                    this._errorDialogContent.innerHTML = result.msg;
                    this._errorDialog.open = true;
                    return;
                }
                let reader = new FileReader();
                reader.onload = (event) => {
                    const arrayBuffer = (event.target as any).result;
                    const byteArray = new Uint8Array(arrayBuffer); // Convert to Uint8Array                
                    let blob = new Blob([byteArray], { type: uploadedFile.type });
                    this._addAttachments(feature, blob, uploadedFile.name, uploadedFile.type);
                };
                reader.onerror = () => {
                    this.hideLoading();
                    this.showAlert("error", "Attachment upload has failed.", 5000);
                };
                reader.onprogress = () => {
                    this.showLoading();
                };
                reader.readAsArrayBuffer(uploadedFile);

});
            document.getElementById('fileSelector')?.click();
}

I useFeatureLayer.queryAttachments to show on a form the attachments with no problem.

In popup it looks like this

The only difference I see is that in the popup the image comes with additional parameters

Appreciate any help on this.

LaurenBoyd · Answer

Hi @MKY -

Would you be able to provide more details about your configuration? I tried reproducing the issue, but haven't been able to see what you're experiencing.

It looks like the request to the service with the attachments has a proxy URL appended to it. Is this a secure layer with the credentials saved in the item and that layer is being loaded in your application? Can you also confirm that this was working with the widget?