Ajax-обновление сгенерированного изображения бэкенда

Я работаю над генератором изображений. Пользователь должен иметь возможность вставить некоторые переменные (такие как имя и т.д.) и отправить форму с помощью кнопки. Бэкэнд генерирует изображение и показывает его во фронтэнде. Это должно происходить с помощью Ajax, так как я не хочу перезагружать страницу. Иначе все введенные пользователем данные пропадут, и пользователю придется заполнять все поля заново.

Приведенный ниже код работает до сих пор. Есть только одна проблема. После того, как img создан и показан во фронтенде (работает отлично), он не генерирует новые изображения, когда вставляется новый ввод.

Необходимо заменить изображение img на новое сгенерированное (с новыми входными данными). Изображение успешно генерируется в бэкенде.

Это мое представление Django:

def build(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        createIMG(name)
        
        context = {'msg': 'Success'}

        return JsonResponse(context)

А это мой html-файл

<form method="POST" id="form-create">
    {% csrf_token %}
    <button type="submit">Create IMG</button>
    <input type="text" name="name" id="name" placeholder="Name">
</form>

<h4></h4>
<div class="out-img"></div>

Это мой сценарий

<script>
$(document).on('submit', '#form-create', function (e) {
    e.preventDefault()

    $.ajax({
        type: 'POST',
        url: "{% url 'creator:build' %}",
        data: {
            name:$('#name').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        },
        success: function (data){
            if (data.msg === "Success") {
                $('h4').html('It worked!');
            }

            if (data.msg === 'Success') {
                var loadIMG = '<img src="{{ MEDIA_URL }}/img.png" alt="">'
                jQuery('.out-img').html(loadIMG);
            }
        },
    });
});
</script>     

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