使用Leaflet在弹出内容中添加图像

Question

after searching deeper in many questions and in many examples I couldn't get it working. I've trying anything written in any example.

I want to add an image inside a popup marker without using the amazing Leaflet.photo plugin this time.

My problem is that the image goes away from the popup boundaries the first time I open it out. After closing it and open it again, the image fits perfectly within the boundaries.

The same as it happens in this example example

I also tryed to hack the CSS class in following way instead of write custom options as in the example source code.

.leaflet-popup-content img { max-width:234px !important; height:auto; width:auto !important; } 

Nothing changed though, the result is the same as in the example shown. Any suggestion?

Thanks a lot

Answer 1

What may happen is that the image takes some time to download, hence Leaflet does not know the correct size to give to the popup container.

Then on second opening, the image is fetched from browser cache, and Leaflet can properly compute the popup size.

You can try a delayed myPopup._updateLayout() call to have Leaflet re-evaluate the popup container size once your image is downloaded. Eg attach an onload listener to your image element, with a callback that calls the _updateLayout() method on the popup.

See also leafletjs adding scrollable pop up?