代码之家 › 专栏 › 技术社区 › Boudhayan Dev

如何将javascript占位符包含在jinja2占位符中?

jinja2 flask html jquery javascript

Boudhayan Dev · 技术社区 · 6 年前

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

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>

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

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

PS-我尝试过对图片文件夹使用相对路径,而不是对ex使用url\u for()函数- <img src="../static/photo/{{img}}"> 但也失败了。

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

请帮忙。

编辑-

用过之后 " ,导致以下错误。

1 回复 | 直到 6 年前

shifloni 6 年前

你需要用引号来避开花括号。因为你需要在一个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>

推荐文章

Kevin Müller · 使用javascript更改字节保存二进制数据

2 年前

NextNightFlyer · 如何将参数传递给Python应用程序的Get请求?

2 年前

Tushar Nautiyal · 我们需要在Flask应用程序中进行功能缩放吗

2 年前

Santhosh S · 在flask中使用会话

2 年前

sK500 · 从flask传递到JS的值是html格式的,而不是静态的

2 年前

Callum · 在HTML(Python应用程序)中使用变量时,在{name}周围放置不必要的括号

3 年前

Nadav Holtzman · 如何使用javascript更改HTML中的Flask WTForm字段值?

3 年前

Degun · 图表Js:如何根据第三个数据更改点的颜色

3 年前

Jae_JPN · HTML不会将参数传递给缺少1个必需的位置参数的烧瓶

3 年前

Shwetha K · Docker错误:MySQLdb_例外。操作错误:(2002,“无法通过套接字'/var/run/mysqld/mysqld.sock'(2)连接到本地MySQL服务器”)

3 年前