如何在弹出窗口中显示图像

Question

我有一个csv文件，其中包含所有属性，例如名称，图像url，伦敦每家餐厅的价格。当鼠标移至地图中餐厅的位置时，我使用下面的代码显示弹出窗口。但是，它只能显示图像url文本，而不能显示图像本身。是否可以通过更改下面的代码来使弹出窗口直接显示每个餐厅的图像？

var mypopup = new mapboxgl.Popup({closeButton: false});
map.on('mouseover', 'Restaurant', function (e) {
mypopup
.setLngLat(e.features[0].geometry.coordinates)
.setHTML("<h3>" + e.features[0].properties.name + "</h3>Categories: " + e.features[0].properties.categories + "<br />Image Url: " + e.features[0].properties.image_url + "<br />Location: " + e.features[0].properties.location + "<br />Phone Number: " + e.features[0].properties.display_phone + "<br />Price: " + e.features[0].properties.price + "<br />Rating: " + e.features[0].properties.rating)
.addTo(map);
});
map.on('mouseenter', 'Food', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'Food', function () {
map.getCanvas().style.cursor = '';
mypopup.remove();
});

Answer 1

您需要在其中包裹图片网址和img html元素，例如<img src="e.features[0].properties.image_url" />。例如，如果您希望它们都具有相同的大小，则可能必须进行一些造型。