Изменение изображения в шаблоне Flask через Javascript

Question

Итак, у меня есть приложение фляги, которое имеет только один шаблон (HTML-файл).HTML-файл изменяется с помощью файла JavaScript.Он изменяет DOM через jquery, и у колбы с этим нет проблем.Однако, когда я меняю тег img, возникают проблемы.Это мой код JavaScript.

$(document).ready(function(){
    mainPage = $("#mainPage");
    setMainPage();
});

function setMainPage(){
    mainPage.html('<div><a href= "#"><img src="{{ url_for('static',filename='images/facebook.png') }}" alt="icon" class="socialBtns"></a></div>');
}

, это возвращает ошибку: «пропущено) после списка аргументов», и ошибка происходит в номере строки, где я установил mainPage.html ().Поэтому я подумал, что это были «цитаты, которые вызывали проблему.поэтому я избежал их, используя обратную косую черту следующим образом:

$(document).ready(function(){
    mainPage = $("#mainPage");
    setMainPage();
});

function setMainPage(){
    mainPage.html('<div><a href= "#"><img src="{{ url_for(\'static\',filename=\'images/facebook.png\') }}" alt="icon" class="socialBtns"></a></div>');
}

Но когда я делаю это, весь текст загружается просто отлично, но изображение выдает ошибку "http://127.0.0.1:5000/%7B%7B%20url_for('static',filename='images/facebook.png')%20%7D%7D 404 (НЕ НАЙДЕНО)"

Поэтому я попытался установить этот URL-адрес src ({{url_for (\ 'static \', filename = \ 'images / facebook.png \')}}) внутри шаблона html, чтобы увидеть, возможно, у меня былопечатка, а я нет.Когда он загружается в HTML-шаблон, изображение загружается просто отлично.Но по какой-то причине, когда я пытаюсь изменить DOM из моего файла JS, он не хочет работать.Я везде искал похожую проблему.но никто, похоже, не имеет этой же проблемы.Я даже видел сообщение в блоге о том, что кто-то менял дом через ajax точно так же, и он работал нормально.Пожалуйста помоги.