Trying to pop up image in GeoJSON file?

Question

I am trying to put an image inside the geoJSON file.

I know, that Geojson works as string and I cannot input the image directly, however I found some stuff, like this below:

http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm

which could be working, when code would be written properly. I believe, that problem lies somewhere in the quotes.

https://teamtreehouse.com/community/somebody-please-help-me-put-images-in-json

Anyhow my code looks like:

"type": "Feature",
             "properties": {
             "Title": "Stretham house",
                 "Head": "Flat to leave",
                 "Description": "<a href='https://en.wikipedia.org/wiki/Cambridge#/media/File:KingsCollegeChapelWest.jpg'<a>File directory</a>"
             "Pict":"image.png"
        },
            "geometry": {
            "type": "Point",
            "coordinates": [
            0.211212,
            52.344149
                ]
                  }
                    }];

And then...

var openreach = L.geoJSON(openpoor, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
    return L.circleMarker(latlng, btMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1><u><font color="red">'+feature.properties.Title+'</h1></u></font><h2>Address: '+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p><a>'+feature.properties.URL+'</a><br><img src='+ feature.properties.Pict +'/>');
}

    }).addTo(map);

As you can see I tried to put an image by 2 ways. Link opens me the image URL, however it's not visible at the pop up.

Another option fell through due some code mismatch.

I would like to have an effect similar to Google MyMaps

I am aware, that GeoJSON does not support a way such this.

Answer 1

Fixed the link http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm

Right click on http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm view source. note line 43, is where I define the popup. Since the popup is basically HTML I style it with a size and center() it in the popup. The GeoJSON file picture value is stored in feature.properties.Pict My code points to an image folder and the picture name. img src='images/" + feature.properties.Pict and I use some styling to control the size displayed.

The url to my GeoJSON file http://www.gistechsolutions.com/leaflet/DEMO/basic/data/Eagles.json shows values for the Pict attribute like ("Pict": "baldeagle2.jpg")

So my popup knows where to look for the picture and what image to grag, and how to display it.

var popupContent = "<p><b>"+ feature.properties.COMMON_NAM +"</b><br> <center><img src='images/" + feature.properties.Pict + "' style='width:200px;height:300x;'></center> <br> Located at site: <b>" +
feature.properties.LOCALITY_I +'</b></p>' ;

layer.bindPopup(popupContent);

};

img src='images/" + feature.properties.Pict + "'

is the same HTML as src="images/baldeagle2.jpg" and the image is stored in my images folder off the website root. Of course the actual filename changes to match the record attribute.