Select to view content in your preferred language

Adding an image to PopupTemplate V3.4

06-18-2023 07:15 PM
New Contributor

Im trying to add an image to PopupTemplate in V3.4, 

doing something like this didn't work for me

return new PopupTemplate({
              title: `${event.mapPoint.x},  ${event.mapPoint.y}`,
                `<div class="popup-content">` +
                "<img src='widgets/TowersConnection/images/Green-2G.png' alt='Image Description' " 


 i always get src empty in the browser so image never loads, how do i set an image then?

0 Kudos
1 Reply
Occasional Contributor III

Not sure, maybe you need to add your HTML to Content instead of Description?

I added a green button to this sample popup code from Esri:

<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Popup actions | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;

    <link rel="stylesheet" href="" />
    <script src=""></script>

      ], (Map, FeatureLayer, MapView, geometryEngine, reactiveUtils) => {
        // Create the Map
        const map = new Map({
          basemap: "gray-vector"

        // Create the MapView
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.08, 34.1],
          zoom: 11

         * The PopupTemplate content is the text that appears inside the
         * popup. Bracketed {fieldName} can be used to reference the value
         * of an attribute of the selected feature. HTML elements can be
         * used to provide structure and styles within the content.

        // Add this action to the popup so it is always available in this view
        const measureThisAction = {
          title: "Measure Length",
          id: "measure-this",
          image: ""

        const template = {
          // autocasts as new PopupTemplate()
          title: "Trail run",
          content: "<div>{name}</div><div class='popup-content'><img src='' height='20px' alt='image description'></div>",
          actions: [measureThisAction]

        const featureLayer = new FeatureLayer({
          url: "",
          popupTemplate: template


        // Execute each time the "Measure Length" is clicked
        function measureThis() {
          const geom = view.popup.selectedFeature.geometry;
          const initDistance = geometryEngine.geodesicLength(geom, "miles");
          const distance = parseFloat(Math.round(initDistance * 100) / 100).toFixed(2);
          view.popup.content =
            "<div style='background-color:DarkGray;color:white'>" +
            distance +
            " miles.</div>";

        // Event handler that fires each time an action is clicked.
          () => view.popup,
          (event) => {
            // Execute the measureThis() function if the measure-this action is clicked
            if ( === "measure-this") {

    <div id="viewDiv"></div>
0 Kudos