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

Question

我有一个csv文件，其中包含所有属性，例如名称，图片网址，伦敦每家餐馆的价格。 当我的鼠标移动到地图中餐厅的点时，我使用下面的代码显示弹出窗口。 但是，它只能显示图像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

你需要将图像url和img html元素包装起来，例如<img src="e.features[0].properties.image_url" /> 。 例如，如果你想要它们的大小相同，你可能需要做一些样式。