从Django中的视图返回HTML元素

Question

I'm trying to return an image from a view to a template in Django. Currently my view has an array I want to display in a table, but in different ways (most elements as strings but one in particular as an image)

items = [
  ['an apple', '<img src="apple.png" \\>'], 
  ['a pear', '<img src="pear.png" \\>'], 
  ['an orange', <img src="orange.png" \\>]
]

and in my template,

<table>
{% for fruit in items %}
  <tr>
  {% for element in fruit %}
    <td>
      {{ element }}
    </td>
  {% endfor %}
  </tr>
{% endfor %}
</table>

This prints out the literal string instead of displaying the image pear.png.

Is there a way I can tell the template to insert the element into the code rather than render as a string?

Answer 1

The filter safe marks a string as not requiring further HTML escaping prior to output.

<table>
{% for fruit in items %}
  <tr>
  {% for element in fruit %}
    <td>
      {{ element | safe }}
    </td>
  {% endfor %}
  </tr>
{% endfor %}
</table>

---

Sidenote: You can also convert your items structure to a dict for easier and clearer usage:

items = {
  'an apple': '<img src="apple.png" />', 
  'a pear': '<img src="pear.png" />', 
  'an orange': '<img src="orange.png" />'
}

Template:

<table>
{% for fruit, img in items.items %}
  <tr>
    <td> {{ fruit }}
    <td> {{ img | safe }} </td>
  </tr>
{% endfor %}
</table>

---

Lastly, you can also only add the image source in your dict and avoid having to use safe :

items = {
  'an apple': 'apple.png', 
  'a pear': 'pear.png', 
  'an orange': 'orange.png'
}

Template:

<table>
{% for fruit, img in items.items %}
  <tr>
    <td> {{ fruit }}
    <td> <img src="{{ img }}" /> </td>
  </tr>
{% endfor %}
</table>

Answer 2

 {% for fruit, image_tag in items %}
     <td> {{fruit}} </td>
     <td> {{image_tag|safe}} </td>
    {% endfor %}

you need to mark the string as safe for the xss protection https://docs.djangoproject.com/en/1.8/ref/templates/language/#automatic-html-escaping

If you don't want data to be auto-escaped, on a per-site, per-template level or per-variable level, you can turn it off in several ways.

Why would you want to turn it off? Because sometimes, template variables contain data that you intend to be rendered as raw HTML, in which case you don't want their contents to be escaped. For example, you might store a blob of HTML in your database and want to embed that directly into your template. Or, you might be using Django's template system to produce text that is not HTML – like an email message, for instance. For individual variables¶

To disable auto-escaping for an individual variable, use the safe filter:

This will be escaped: {{ data }} This will not be escaped: {{ data|safe }}

Answer 3

You can use

{% for fruit, fruitimage in items %}
 <td> {{fruit}} </td>
 <td> <img src="{{fruitimage}}"> </td>
{% endfor %}