Need some help about HTML and Jinja

Question

I want my page to show table of content from list of dictionary call book_re. I use Jinja to iterate through my list and show each of them in page. One of them is image link so I use <img> tag for output the image. I add src attribute and use Jinja to assign img link from my dict. But HTML interpret my first quotation mark in key bracket as close quotation mark for src attribute. The problem is I don't know which escape syntax I need to use from Jinja or HTML. Which one I should use or are there any solution? to solve this.

Here is my HTML code

{% extends "layout.html" %}

{% block title %}
    Search results: {{ keyword }}
{% endblock %}

{% block main %}
    <h3>Keyword {{ keyword }}</h3>
    <h3>result</h3>
    <table class="table">
        {% for book in book_re %}
            <td><img src="{{ book["smallpic"] }}" alt="bookpic"></td>
        {% endfor %}
    </table>
{% endblock %}

Answer 1

Since Jinja is rendered before your HTML, your template should work. You can combine single and double quotes if you want better syntax highlighting support in your IDE.

<td><img src="{{ book['smallpic'] }}" alt="bookpic"></td>