topic Re: img src in FeatureLayer popupTemplate in ArcGIS JavaScript Maps SDK Questions

img src in FeatureLayer popupTemplate

JohnDMorgan — Tue, 04 Mar 2025 17:12:04 GMT

Hello,

I am trying to point to an img src that is a string/path on a FeatureLayer, but it always comes through as a broken image. Can anyone point me to how to get this to work? I think I must bypass the popup template class or something to this effect. Here is my code snippet:

const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/eoP5lsTDzcIUyaQZ/arcgis/rest/services/.../FeatureServer", popupTemplate: { title: "{Name}", // Field from the feature attributes content: ` <b>Image Path:</b> {ImagePath}<br> <a href="{ImagePath}" target="_blank">URL</a> <img src="{ImagePath}"> ` } })

Re: img src in FeatureLayer popupTemplate

JohnDMorgan — Tue, 04 Mar 2025 17:43:01 GMT

This is the result I get:

Re: img src in FeatureLayer popupTemplate

JohnDMorgan — Tue, 04 Mar 2025 19:15:00 GMT

It appears the sanitized HTML may be the issue? I found this https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/using-html-with-popups-in-the-arcgis-api-for-javascript/

Re: img src in FeatureLayer popupTemplate

LaurenBoyd — Thu, 06 Mar 2025 05:56:35 GMT

Hi @JohnDMorgan -

In case you haven't gotten this working yet, you can use a function to format the popup content and that should get links working for you. You'll just need to pass the feature into the function so that you can access the attribute that contains the image src path.

Check out this example: https://codepen.io/laurenb14/pen/zYJqzYp

Hope this helps!