Python Flask框架前端js拼接url_for

最新推荐文章于 2025-11-06 15:49:30 发布

原创最新推荐文章于 2025-11-06 15:49:30 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #flask

这篇博客介绍了如何在前端HTML页面中，利用JavaScript根据当前登录的用户名动态修改img标签的src属性，以显示用户的头像图片。示例代码展示了如何结合浏览器缓存或后端数据获取的用户名，构建图片URL并更新img标签。

假设前端html页面内有这样一个元素，它需要根据当前登录的用户名来获取用户头像图片。图片地址是static/Media/img/user/icon/用户名.ico

<img class="usericon" src="#">

用JavaScript代码修改img标签的src属性

var username = "xiaoming"; 
//↑假设用户名是xiaoming，这个值是从浏览器缓存中读取或者是来自后端的数据
$(".usericon").attr("src", "{{ url_for('static',filename='Media/img/user/icon/') }}" + username + ".ico");  
//↑url_for的地址填到最后一个目录就行了，在外面再拼接字符串