Невозможно загрузить изображение с помощью метода.html(text) jQuery в примере django/ChatterBot

Question

ChatterBot Учебный набор данных

image_data.yml:

categories:
- myown
conversations:
- - show me famous book image?
  - <img src="{% static 'img/Book.png' %}"  height="50" width="50"> //this line is sent as **text** in $row.html(text); 

Код JQuery:

  function createRow(text) {
    var $row = $('<li class="list-group-item"></li>');

    $row.empty().html(text); //$row.html(text); #Both are not working
    $chatlog.append($row);
  }

app.html:

{% load staticfiles %} //on top of file
...
..
...    
<ul class="list-group chat-log js-chat-log">
    //here <li class="list-group-item"></li> element will appended.
                            </ul>

Ошибка:

GET http://127.0.0.1:8000/%7B%%20static%20'img/Book.png'%20%%7D 404 (Not Found)

Проблема в том, что она не учитывает {% load staticfiles %}, Вот почему это не рендеринг моего изображения. Может ли кто-нибудь помочь мне в этом?

Примечание. Если я предоставлю ссылку на изображение в качестве источника, он будет работать. Но когда я пытаюсь дать полный локальный путь, для этого он дает not allowed to load local resource ошибка в консоли chrome.