I would like to display images in a marker popup but I get the following error:

enter image description here

The image does display when I write:

var picURL2 = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [
        [55.1, 11.6],
        [55.0, 11.74644]
L.imageOverlay(imageUrl, imageBounds).addTo(map);

But when I try to add it in a marker popup like so:

var picURL2 = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';

shelter1.bindPopup("<img src=" + picURL2 + "/>");

, I get the 404 error.


You just need to add extra quotes around the src value:

shelter1.bindPopup("<img src='" + picURL2 + "'/>");

(note the single quotes ' before and after the closing/opening string double quotes ")

Live demo: https://plnkr.co/edit/QxqvzaIgmONlCo0jirHy?p=preview

  • Thx, it worked :) The images is quite large. Even when I zoom out it still takes up the entire screen. Is there a way to adjust the image inside the popup? I've tried adding "maxWidth: 200" inside the popup, but that just makes the popup smaller and not the image.
    – Saud
    Oct 15 '17 at 7:40
  • 2
    Set a class on the <img> tag and set a CSS rule on it for example. Feel free to look for resources on Stack Overflow or asking a new question there should you need further help.
    – ghybs
    Oct 15 '17 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.