Как включить заполнитель javascript в заполнитель Jinja 2?

Question

Я пытаюсь встроить эту функцию в мое приложение Flask -> Scartered 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 - я попытался использовать относительный путь для папки с изображениями вместо функции url_for () для ex- <img src="../static/photo/{{img}}">, но также не удалось.

В этом случае была показана следующая ошибка -

Пожалуйста, помогите.

РЕДАКТИРОВАТЬ -

После использования " возникла следующая ошибка.

Answer 1

Вы должны выйти из фигурных скобок, используя кавычки. Поскольку вам нужно сделать это внутри атрибута html src, вам также придется избегать этих кавычек, поскольку кавычки уже используются внутри атрибута HTML, и способ достижения этого заключается в использовании "

Посмотрите на атрибут img tag src ниже. Если вы хотите избежать фигурных скобок Jinja, которые не являются частью атрибута HTML, вы можете использовать блок 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>