Question

我正在尝试将此功能嵌入我的Flask应用程序中-> Scattered Polaroid Gallery

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

一起使用

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

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-我曾尝试对图像文件夹使用相对路径，而不是对前<img src="../static/photo/{{img}}">使用url_for（）函数，但它也失败了。

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

请帮助。

编辑-

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

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>

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

编辑-

1 个答案: