How can I add an attachment as an image in InfoTemplate?

[TracySchloss]

I have a featureLayer that has attachments.  I'd like the attachments to be added as an image in the infoTemplate.  I have a function to generate its content .   If I put in a breakpoint on the line return formatString, it gets to it before it evaluates queryAttachmentInfos.

It is finding the right URL for the attachment.  The rest of the tag is populated, it just doesn't have the image I expect. 

var infoTemplate = new InfoTemplate();
infoTemplate.setContent(setWindowContent);

 function setWindowContent(graphic){
   var formatString = "";
   var imageString = "";
   var imageStyle = " height='30' width='30' alt='site image'";
  var  objectId = graphic.attributes[featureLayer.objectIdField];
   formatString = "<b>"+graphic.attributes.Facility +"</b><br/>" +graphic.attributes.Address+"<br/>" 
    + graphic.attributes.City+", " + graphic.attributes.State ;
       
       featureLayer.queryAttachmentInfos(objectId, function(infos){
             var imgSrc;
            if (!!infos[0].url) {
              imgSrc = infos[0].url;
            }               
           if (imgSrc){
             imageString = "</br><img src='"+imgSrc +"' " + imageStyle+">";
             console.log(imageString);  // I am getting value here
               formatString += imageString;
           }
          });   
    return formatString;
 }

[TracySchloss]

I'm not feeling too good about this.  There are several threads related to this, but none of them have much of a solution.  He're what I have so far:

JS Bin - Collaborative JavaScript Debugging

[TracySchloss · Accepted solution]

I fixed it, I think.  I'll leave my jsBin out there.  Someone will need this eventually, there are too many unanswered threads related to it.

The last thing I wanted to do is change the alignment of the image so that it appears next to the next and not above it. 

This is crude, but you get the idea.

This is the code for having the image be above the text:

var selectQuery = new Query();
     
     on(featureLayer, "click", function(evt){
       formatString = "";
       var  objectId = evt.graphic.attributes[featureLayer.objectIdField];
        selectQuery.objectIds = [objectId];
         featureLayer.selectFeatures(selectQuery);      

    on(featureLayer, 'selection-complete', setWindowContent);

 function setWindowContent(results){
     var imageString = "";
     var imageStyle = " height='60' width='60' alt='site image' float='left'";
     var deferred = new Deferred;
  
        var graphic = results.features[0];
      var  objectId = graphic.attributes[featureLayer.objectIdField]; 
         
      featureLayer.queryAttachmentInfos(objectId).then(function(response){
         var imgSrc;
           if (response.length === 0) {
              deferred.resolve("no attachments");
            }else {                 
                imgSrc = response[0].url;
                imageString = "<img src='"+imgSrc +"' " + imageStyle+">";
                formatString += imageString;
           } 
        formatString += "<br><b>"+graphic.attributes.Facility +"</b><br/>" +graphic.attributes.Address+"<br/>" 
      + graphic.attributes.City+", " + graphic.attributes.State ;             
           
       infoTemplate.setContent(formatString);   
    });
   map.enableMapNavigation();
 } 

Here's the  variation where the image is placed next to the text, rather than above it, using a table with one row:

function setWindowContent(results){
   map.infoWindow.resize(240, 100);
     var imageString = "<table><tr>";
     var imageStyle = "alt='site image' style='height=:40px width:40px float:left'";
     var deferred = new Deferred;
      var graphic = results.features[0];
      var  objectId = graphic.attributes[featureLayer.objectIdField]; 
         
      featureLayer.queryAttachmentInfos(objectId).then(function(response){
          var imgSrc;
          if (response.length === 0) {
              deferred.resolve("no attachments");
          }
          else {
              imgSrc = response[0].url;
              imageString += "<td><img src='" + imgSrc + "' " + imageStyle + "></td>";
              formatString += imageString;
          }
  
          formatString += "<td><b>" + graphic.attributes.Facility + "</b><br/>" + graphic.attributes.Address + "<br/>" +
          graphic.attributes.City +
          ", " +
          graphic.attributes.State +
          "<td></tr></table>";
          
          infoTemplate.setContent(formatString);
          infoTemplate.setTitle(" ");
      });
   map.enableMapNavigation();
 }