1

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.

Improve this question

1 Answer 1

Reset to default
3

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

Improve this answer
2
  • 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
    Commented Oct 15, 2017 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
    Commented Oct 15, 2017 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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