javascript - Flask url_for 在模板的外部 JavaScript 中不起作用

Question

在index.html中，我链接到一个index.js文件。单击一个按钮，js 会向 Flask 后端发送请求。后端返回静态文件路径:'data/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 或页内脚本中，它就可以工作。但这里在 js 中使用 url_for 则不然。

Answer 1

Jinja2 模板处理器通常在 Flask 应用程序中使用，仅适用于模板文件。您正在通过 <script> 导入 JavaScript元素。模板处理器不会看到该 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>

然后在脚本中引用全局变量。粗略示例:

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

    mvt.append(ig);
}

或者，您可以调用 Flask 服务器上的 api 来获取 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_edit&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