Flask 和 Jinja2 url_for 错误 - 将 json 对象连接到 url_for

Question

我在一个项目中使用带有 Jinja2 和 MapBox 的 Flask，该项目涉及使用从模型数据派生的 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);

在我的 JS 中使用此 JSON 数据的示例：

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)

但是，当我尝试将我的图像数据连接到 jinja 的 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 对象。 Jinja 无法访问这些；它在服务器上运行，而您的 JavaScript 在客户端运行。呈现模板时 feature 不存在。您将需要处理与 JavaScript.

的连接

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

Flask 和 Jinja2 url_for 错误 - 将 json 对象连接到 url_for

Flask and Jinja2 url_for error - concatenating json object into url_for

python

jinja2

flask

mapbox