Flask and Jinja2 url_for error - конкатенировать объект json в url_for

Question

Я использую Flask с Jinja2 и MapBox в проекте, который включает в себя построение данных на карте с использованием GeoJSON, полученных из данных модели. Пример того, как это будет загружен:

$.getJSON("{{ url_for(".geojson") }}", function(data) { 
    var geojson = L.geoJson(data, { 
     onEachFeature: function (feature, layer) { 

    //do stuff 

     } 
    }); 
    markers.addLayer(geojson); 

    var map = L.map('map', {maxZoom: 9, minZoom: 3}).fitBounds(markers.getBounds()); 
    baseLayer.addTo(map); 
    markers.addTo(map); 

В качестве примера использования этого JSON данные в моих JS:

var feature = e.layer.feature; 
//print item name 
console.log(feature.properties.name) 
//print item latitude 
console.log(feature.properties.latitude) 
//print item category info 
console.log(feature.properties.category.name) 

Это прекрасно работает. Теперь в моем наборе данных добавлены URL-адреса изображений (пример 09379_580_360.jpg), а сами изображения размещены в папке static/images/eol. Я хотел бы, чтобы включить их в качестве изображения в DIV, из которых я заходящего динамически через JS, как так ...

var commoncontent = '<div class="panel-heading"><h3>'+feature.properties.name+'</h3></div>' 
$('#common').html(commoncontent) 

Однако, когда я пытаюсь объединить мои данные изображения в url_for дзиндзя в ...

var commoncontent = '<div><img src="{{ url_for("static", filename="images/eol/thumbs/big/'+feature.properties.category.localimageurl.jpg+'") }}"></div>' 

... Я получаю эту ошибку в моей консоли

GET http://127.0.0.1:5000/static/images/eol/thumbs/big/feature.properties.category.localimageurl.jpg 404 (NOT FOUND) 

Я знаю, что feature.properties.category.localimageurl правильно, как он печатает на моей консоли, когда я console.log() его. Тем не менее, я понятия не имею, почему интерпретатор принимает его непосредственно как строку, а не конкатенацию?

Answer 1

feature - объект JavaScript. Джинджа не имеет доступа к этим; он запускается на сервере, тогда как ваш JavaScript работает на клиенте. feature не существует, когда ваш шаблон визуализируется. Вам нужно будет обработать конкатенацию с помощью JavaScript.

var commoncontent = '<div><img src="{{ url_for("static", filename="images/eol/thumbs/big/") }}' + feature.properties.category.localimageurl.jpg + '"></div>'