Попытка загрузить статические изображения из JS-скрипта в Django
Я использую компонент 'select2' выпадающего списка 'https://select2.org/dropdown' в Django для отображения выпадающего меню, которое имеет изображение флага рядом с каждым пунктом. В процессе разработки я создавал строковый литерал в своем JS-коде для указания на статическую папку img, но теперь я развернул приложение на AWS и мои статические файлы обслуживаются через ведро S3, и теперь изображение не загружается
код js компонента select2:
function formatState (state) {
if (!state.id) {
return state.text;
}
var baseUrl = "static/img/flags";
var $state = $(
'<span><img src="' + baseUrl + '/' + state.element.value.slice(0,3).toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
в моем html-инспекторе источник изображения выдает:
img src="static/img/flags/bsd.png" class="img-flag">
Я явно вижу, что img src выше не указывает на мой s3 bucket, поэтому я попытался создать строковый литерал для статического img внутри кода select2 js, чтобы воспроизвести {% static '/img/flags/all.png' %} :
'<span><img src="' + '{% static' + '"' + '/' + 'img' + '/' + 'flags' + '/' + state.element.value.slice(0,3).toLowerCase() + '.png' + '"' + ' %}' + 'class="img-flag" /> ' + state.text + '</span>'
это производит:
<img src="{% static" img flags chf.png" %}class="img-flag">
как избавиться от пробела между img flags и chf.png, чтобы сделать его '/img/flags/chf.png'
но что более важно, будет ли это работать в Django, получая статический файл через js код?