img src in FeatureLayer popupTemplate

[JohnDMorgan]

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}">
`
}
})

[JohnDMorgan]

This is the result I get:

[JohnDMorgan · Accepted solution]

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...

[LaurenBoyd]

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!