Mapbox GL JS - Adding variable dependent images to popup

Question

I've been working with popups in Mapbox GL JS, using HTML and want to be able to use variables within the Mapbox dataset, so different popups show different images, depending on attributes in the Mapbox dataset. (see below)

map.on('click', function(e) { 
var features2 = map.queryRenderedFeatures(e.point, { layers: ['stadium'] });
// if the features have no info, return nothing
if (!features2.length) {
 return;
}
var feature2 = features2[0];
// Populate the popup and set its coordinates
// based on the feature found
var popup = new mapboxgl.Popup()
 .setLngLat(feature2.geometry.coordinates)
 .setHTML('<div id="popup" class="popup" style="z-index: 10;">' +
 '<ul class="list-group">' +
 '<img src="url-address/" >' + feature2.properties['Image'] +
 '<li class="list-group-item"> <b> Stadium: </b>' + feature2.properties['Address'] +" </li>" + 
 '<li class="list-group-item"> Capacity: ' + feature2.properties['Capacity'] + " </li>" + 
 '<li class="list-group-item">' + feature2.properties['Fixtures'] + " </li>" +
 '<li class="list-group-item">' + feature2.properties['Fixtures2'] + " </li>" + 
 '<li class="list-group-item">' + feature2.properties['Fixtures3'] + " </li>" +
 '<li class="list-group-item">' + feature2.properties['Fixtures4'] + " </li>" +
 '<li class="list-group-item">' + feature2.properties['Fixtures5'] + " </li>" +
 '<li class="list-group-item">' + feature2.properties['Fixtures6'] + " </li>" +
 '<li class="list-group-item">' + feature2.properties['Fixtures7'] + " </li>" +'</ul> </div>'
 )
 .addTo(map);

Basically I have Img src HTML tag, which I want to add the different image attribute depending on what is clicked. However, I've tried several ways of doing this, but can't get it to work - the pic below shows what I currently get below (without it crashing entirely). Hope this makes sense and someone is able to help...or at least let me know if it's not possible!

Screenshot of what it looks like in the popup

• pathmapper: It would help to answer the question if you could provide an example from your data for feature2.properties['Image'].
• TheMole: Sorry, I've probably not explained the issue very well. The 'Image' attribute is the name of the image and extension - e.g. stpetersburgnew_top.jpg
• pathmapper: If your images are located in the same directory as your HTML file with the map, the following from the existing answer should work '<img src="' + feature2.properties['Image'] +'">' + .... If the images are located in a different directory, you have to add also the path to this image directory: '<img src="url-address/' + feature2.properties['Image'] +'">' + ...

Answer 1

I hope I got your question right, but currently this is the "image" you try to show for every popup:

<img src="url-address/" >

The specific image path from feature2.properties['Image'] is simply text printed after the image and it is not part of the image source, but this is presumably what you intended.

Something like this should render your image in the popup:

'<img src="url-address/' + feature2.properties['Image'] +'">' + ...

Maybe you also need to add the image extension (jpg, png, etc.) depending on the specific property in your data.

• TheMole: Thanks for the spot, I've changed this, but I don't think it's the <li> tag causing the issue as the <img> is self enclosing tag anyway if I'm right in thinking.
• tallistroan: You are right, however currently this is the image you try to show for every popup: <img src="url-address/" > The part with feature2.properties['Image'] is simply text printed after the image and has nothing to do with the image source