Попытка загрузить статические изображения из 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 код?

Вернуться на верх