如何在Jinja 2占位符中包含javascript占位符？

Question

我想在我的Flask应用程序中嵌入此功能 - > Scattered Polaroid Gallery

所以，我有一个模板（Jinja2），我正在显示一堆图像。要访问图像，我使用Flask的url_for（）命令，该命令使用符号---> {{}}。在应该动态加载图像的Javascript文件中，使用相同的符号，即----> {{}}。我想知道如何使用Javascript的{{}}以及Flask / Jinja 2 {{}}

下面是用实际文件名替换{{img}}的每个实例的Javascript函数。

function addPhotos() {
  var template = select('#wrap').innerHTML;
  var html = [];
  var nav = [];
  for (i=0; i<1; i++) {
    
    var _html = template.replace('{{index}}', i)
    .replace('img', data[i].img)
    .replace('{{caption}}', data[i].caption)
    .replace('{{desc}}', data[i].desc);
    html.push(_html);
    nav.push('<span id="nav_'+i+'" class="i" onclick ="turn(select(\'#photo_'+i+'\'))">&nbsp;</span>');
  }
  html.push('<div class="nav">'+nav.join('')+'</div>');
  select('#wrap').innerHTML = html.join('');
  sort(random([0, data.length]));
}

<div class="mainPage" id="fullpage">
    <div class="first section">
        <div class="wrap" id="wrap">
            <div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
                <div class="photo-wrap">
                    <div class="side side-front">
                        <p class="image">
                            <!-- <img src="photo/{{img}}"> -->
                            <img src="{{ url_for('static',filename='photo/{{img}}') }}">
                             <!-- .replace('{{img}}', data[i].img) -->
                        </p>
                        <p class="caption">{{caption}}</p>
                        
                    </div>
                    <div class="side side-back">
                        <p class="desc">{{desc}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

以上是使用Javascript和Jinja2 {{}}的模板。

Chrome调试控制台中显示以下错误。

下面是我的Flask应用程序的文件夹结构 -

PS - 我尝试使用相对路径作为图像文件夹而不是url_for（）函数用于ex-<img src="../static/photo/{{img}}">，但它也失败了。

在这种情况下，显示以下错误 -

请帮忙。

编辑 -

使用"后，导致以下错误。

Answer 1

您需要使用引号来转义大括号。因为您需要在html属性src中执行此操作，所以您必须转义这些引号，因为引用已经在HTML属性中使用，实现这一点的方法是使用"

看看下面的img标签src属性。如果你想要逃避不属于HTML属性的Jinja花括号，那么你可以使用jinja {% raw %}块（看看我如何包围{{caption}}）

<div class="mainPage" id="fullpage">
    <div class="first section">
        <div class="wrap" id="wrap">
            <div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
                <div class="photo-wrap">
                    <div class="side side-front">
                        <p class="image">

                            <img src="{{ url_for('static',filename='photo/&quot;{{img}}&quot;') }}">

                        </p>
                        <p class="caption">{% raw %}{{'caption'}}{% endraw %}</p>

                    </div>
                    <div class="side side-back">
                        <p class="desc">{% raw %}{{desc}}{% endraw %}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>