Как создать <img>элемент, включающий Django stati c sr c, используя jQuery

Question

Я хотел бы создать элемент img, используя jQuery. Поскольку я работаю с Django, мне придется ссылаться на файл изображения с помощью переменной stati c. Я пробовал разные решения, но сервер не может загрузить изображение, так как браузер получает неправильный URL.

Я загрузил stati c изначально, все остальные файлы stati c загружаются просто штраф.

Это мой код, который находится в соответствующем файле. js:

// foo.js included in foo.html which extends base.html

// Create Image element
 var arrowImage = $('<img />', {
   id: 'arrowImage',
   src: '{% static \"images/arrow.svg\" %}',
 });

// 
src: '{% static "images/arrow.svg" %}',

//
src: "{% static 'images/arrow.svg' %}",

//
src: "{% static \"'images/arrow.svg'\" %}",

Ошибка:

GET http://127.0.0.1:8000/%7B%%20static%20%22images/arrow.svg%22%20%%7D 404 (Not Found)

У меня есть база. html, которая расширяется на foo. html, где должен быть создан элемент. Файл. js, содержащий указанный выше код, включен в файл fati. html как stati c.

Используя это решение, я получаю правильную созданную модель DOM:

            // Create Image element
            var arrowImage = $('<img />', {
              id: 'arrowImage',
              src: "{% static \'images/arrow.svg\' %}",
            });

Какие выходы:

Любое решение для этого?

Answer 1

Можете ли вы предоставить более подробную информацию о том, где выполняется приведенный выше код?

Возможно, вы запускаете его в файле js, который сам по себе используется как файл stati c. Если это так, то Django не запускает содержимое файла через систему tempalte, поэтому тег шаблона не анализируется.

Пожалуйста, расскажите нам больше о том, как вы обслуживаете содержимое в браузер, и вам будет легче помочь.

Ваши варианты здесь:

1. Жесткий код путей к изображениям. Менее гибкий, но вы можете воспроизвести Django STATIC_ROOT как var в JS где-нибудь.

2. Служить JS таким образом, чтобы получать процессы с помощью системы шаблонов. , Это не так сложно, но это будет означать запуск python для каждого запроса к пути к файлу

3. Обдумайте способ добавления путей к изображениям к HTML, которые могут быть прочитано JS. В зависимости от того, что вы делаете, это может помочь с использованием JS для прогрессивного улучшения (если изображения не нужны только элементам JS)