Flask url_for 在模板的外部 JavaScript 中不起作用答案

【问题标题】：Flask url_for doesn't work in template's external JavaScriptFlask url_for 在模板的外部 JavaScript 中不起作用
【发布时间】：2021-06-14 20:16:11
【问题描述】：

在 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 就不行了。

【问题讨论】：

标签： javascript flask

【解决方案1】：

Flask 应用程序中常用的 Jinja2 模板处理器仅适用于模板文件。您正在通过 <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

【讨论】：

非常感谢。当学生没有提出明确的问题时，你就像一个回答得很好的老师哈哈......
@DarkLei 如果回答了您的问题，请接受。