Блог

В index.html, я ссылаюсь на index.js файл. При нажатии одной кнопки js отправляет запрос на серверную часть колбы. Серверная часть возвращает статический путь к файлу: «данные/Sharon_4.png». Я хочу отобразить его в HTML с помощью следующей функции, но это не работает. Чтобы упростить это, я заменил URL-адрес определенным URL-адресом следующим образом, а не как переменную. Это все равно не работает.

 function test(){
    var mvt = document.getElementById('movieThumbnail')
    var ig = document.createElement('img')
    ig.src = `{{url_for('static', filename='data/haron_4.png')}}`

    mvt.append(ig)
}
 

В HTML тег кажется правильным <img src="{{url_for('static', filename='data/Sharon_4.png')}}">

Если я помещу этот тег непосредственно в HTML или в скрипт на странице, он будет работать. Но здесь, используя url_for в js, этого не происходит.

Процессор шаблонов Jinja2, обычно используемый в приложениях Flask, работает только с файлами шаблонов. Вы импортируете JavaScript через <script> элемент. Обработчик шаблонов не увидит этот JavaScript. Если вы поместите JavaScript непосредственно в свой HTML-файл, он будет обработан Jinja2. Пример:

 <script>
function test(){
    var mvt = document.getElementById('movieThumbnail')
    var ig = document.createElement('img')
    ig.src = `{{url_for('static', filename='data/haron_4.png')}}`

    mvt.append(ig)
}
</script>
 

Что вы могли бы сделать, так это использовать этот простой скрипт для хранения статической папки в переменной окна и использовать ее в своем сценарии. Пример:

 <script>
window.static_folder = "{{url_for('static')}}";
</script>
 

А затем обратитесь к глобальному var в вашем сценарии. Грубый Пример:

 function test(){
    const mvt = document.getElementById('movieThumbnail');
    const ig = document.createElement('img');
    ig.src = `${window.static_folder}/data/haron_4.png`;

    mvt.append(ig);
}
 

В качестве альтернативы вы можете вызвать api на своем сервере Flask, чтобы получить url_for . Пожалуйста, посмотрите этот пример:

 @bp.route('/url_for/')
def public_get_url_for():
    """
    get the url using the url_for method.  url parameters are given as request args
    ie: /url_for?endpoint=stock_editamp;stock_id=12
    example:
    $.get({
                url: '/url_for',
                data: {endpoint: 'stock_edit', stock_id: $('#stock_id').val()}
            }).then(url => window.location = url);

    for route:

    @app.route('/stock_edit/<int:stock_id>')
    def stock_edit(stock_id):
        # some code

    :return: the url or 404 if error
    """
    keywords = request.args.to_dict()
    try:
        return url_for(**keywords)
    except Exception as e:
        return str(e), 404