如何在Flask应用中从外部JavaScript动态设置图片路径

霞舞

发布时间：2025-08-20 16:54:01

947人浏览过

来源于php中文网

原创

如何在Flask应用中从外部JavaScript动态设置图片路径

在Flask应用中，从外部JavaScript文件动态设置图片路径是一个常见需求。由于url_for是服务器端Jinja2函数，无法直接在客户端JS中使用。本教程将介绍一种有效策略：通过在HTML中嵌入JSON格式的服务器端生成数据（利用

动态图片展示

@@##@@

关键点：

id="server-data"：为脚本标签提供一个唯一的ID，以便JavaScript能够轻松地找到它。
type="application/json"：这是至关重要的一点。浏览器只会执行type="text/javascript"（或默认类型）的脚本。指定为application/json后，浏览器会将其视为数据块而非可执行代码，从而避免了语法错误。
{{ data | safe }}：data是Flask视图函数传递过来的JSON字符串。| safe过滤器是必要的，它告诉Jinja2不要对这个字符串进行HTML转义，因为我们希望它作为原始JSON被插入。
3. JavaScript 中的应用
最后，在你的外部JavaScript文件（例如static/js/main.js）中，你可以通过ID获取到这个脚本标签，读取其textContent，然后使用JSON.parse()将其解析为JavaScript对象。之后，你就可以像访问普通对象一样，获取到所需的图片路径并设置给DOM元素。
// static/js/main.js document.addEventListener('DOMContentLoaded', function() { // 1. 获取包含JSON数据的脚本标签 const dataScript = document.getElementById("server-data"); if (dataScript) { try { // 2. 解析JSON字符串为JavaScript对象 const pageData = JSON.parse(dataScript.textContent); // 3. 获取图片元素 const uploadImgElement = document.getElementById("uploadimg"); // 4. 使用解析出的路径设置图片src属性 if (uploadImgElement && pageData.uploadImageUrl) { uploadImgElement.setAttribute("src", pageData.uploadImageUrl); console.log("图片路径已成功设置:", pageData.uploadImageUrl); } else { console.warn("未找到图片元素或图片路径。"); } // 你也可以访问其他传递的数据 console.log("其他设置:", pageData.otherSetting); } catch (error) { console.error("解析服务器数据失败:", error); } } else { console.error("未找到ID为 'server-data' 的脚本标签。"); } });
代码解析：
document.addEventListener('DOMContentLoaded', ...)：确保在DOM完全加载后再尝试访问元素，避免出现null引用。
document.getElementById("server-data")：通过ID获取到HTML中嵌入的脚本标签。
dataScript.textContent：获取脚本标签内部的文本内容，即JSON字符串。
JSON.parse()：将JSON字符串转换为JavaScript对象，这样我们就可以通过点语法（pageData.uploadImageUrl）来访问其中的属性。
uploadImgElement.setAttribute("src", ...)：将动态获取到的图片路径赋值给元素的src属性。
总结
通过在Flask后端生成动态路径并将其序列化为JSON字符串，然后通过带有type="application/json"的脚本标签嵌入到HTML中，最后在外部JavaScript中解析并使用这些数据，我们成功地解决了从外部JavaScript文件动态设置Flask应用中图片路径的问题。这种方法不仅适用于图片路径，也适用于任何需要在服务器端生成并传递给客户端JavaScript的动态数据，提供了安全、灵活且易于维护的数据传输机制。

相关文章


如何在网页中直接运行 Python 后端逻辑（无需服务器）

到底有什么作用？不写会发生什么？

html如何提升速度转pdf_html转pdf提速法【攻略】

html怎样用命令行转pdf_命令行转html为pdf法【指南】

html怎样跨平台转pdf_跨平台html转pdf途径【方案】

相关标签:

python 浏览器 ai Python JavaScript flask json html Static NULL 封装字符串 JS 对象 dom

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：生成准确表达文章主题的标题使用Flexbox垂直对齐按钮：CSS布局实战指南下一篇：HTML表单如何添加输出元素？output标签怎么用？

作者最新文章

如何实现响应式全屏滑出菜单（桌面固定宽度，移动端铺满屏幕）

2026-01-24 09:40

如何在 GAE Go Datastore 中优雅地忽略已废弃的结构体字段

2026-01-24 09:40

如何在 Symfony 中正确显示重定向后的 Flash 消息

2026-01-24 10:02

厂商保证今年我们能看到《腐烂国度3》的更多消息

2026-01-24 10:13

Julia 中如何在结构体内部进行数据预处理：自定义构造函数的正确用法

2026-01-24 10:13

GOG官宣将原版《波斯王子：时之砂》纳入保存计划！没了重制版至少能玩这个

2026-01-24 10:17

如何在字符串模板中正确调用 JavaScript 函数

2026-01-24 10:18

魔性上头《吸血鬼探索者》将于2月份推出免费试玩版

2026-01-24 10:21

如何在 Go 中正确使用第三方包的私有函数

2026-01-24 10:28

大量新剧情《零红蝶：重制版》确认追加全新结局

2026-01-24 10:28

热门AI工具

更多

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PC软件

相关专题

更多

python开发工具
php中文网为大家提供各种python开发工具，好的开发工具，可帮助开发者攻克编程学习中的基础障碍，理解每一行源代码在程序执行时在计算机中的过程。php中文网还为大家带来python相关课程以及相关文章等内容，供大家免费下载使用。

773

2023.06.15

python打包成可执行文件
本专题为大家带来python打包成可执行文件相关的文章，大家可以免费的下载体验。

684

2023.07.20

python能做什么
python能做的有：可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

765

2023.07.25

format在python中的用法
Python中的format是一种字符串格式化方法，用于将变量或值插入到字符串中的占位符位置。通过format方法，我们可以动态地构建字符串，使其包含不同值。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。

719

2023.07.31

python教程
Python已成为一门网红语言，即使是在非编程开发者当中，也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章，大家可以免费体验学习。

1425

2023.08.03

python环境变量的配置
Python是一种流行的编程语言，被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后，我们需要配置环境变量，以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

570

2023.08.04

python eval
eval函数是Python中一个非常强大的函数，它可以将字符串作为Python代码进行执行，实现动态编程的效果。然而，由于其潜在的安全风险和性能问题，需要谨慎使用。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

579

2023.08.04

scratch和python区别
scratch和python的区别：1、scratch是一种专为初学者设计的图形化编程语言，python是一种文本编程语言；2、scratch使用的是基于积木的编程语法，python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容，供大家免费下载体验。

751

2023.08.11

c++ 根号
本专题整合了c++根号相关教程，阅读专题下面的文章了解更多详细内容。

25

2026.01.23

热门下载

更多

网站特效
/
网站源码
/
网站素材
/
前端模板

[图片特效]jQuery分割线拖拽照片前后对比

[表单按钮]jQuery表单元素美化插件jqtransform

[图片特效]支持平滑抖动切换jQuery轮播图代码

[表单按钮]jQuery表单设计器自由拖拽特效

[图片特效]js淘宝首页缓冲幻灯片

[表单按钮]CSS3可自动输入登录表单动画

[表单按钮]jQuery右下角浮动意见反馈表

[图片特效]HTML5全屏商品选择图片切换代码

[表单按钮]jQuery商品分类选择提交表单代码

[图片特效]jQuery 360度全景图插件

[电商源码]openaishop

[其它模板]思翔企(事)业单位文件柜 build 20080313

[企业站源码]雅龙智能装备工业设备类WordPress主题1.0

[电商源码]威发卡自动发卡系统

[电商源码]卡密分发系统

[电商源码]中华陶瓷网

[电商源码]简洁粉色食品公司网站

[电商源码]极速网店系统

[电商源码]淘宝妈妈_淘客推广系统

[电商源码]积客B2SCMS商城系统

[网站素材]美式复古手绘汉堡海报矢量模板

[网站素材]萌系卡通唐装小马插画矢量素材

[网站素材]超市购物宣传方形海报PSD源文件设计下载

[网站素材]粉色极简线条派对海报矢量模板

[网站素材]情人节主题香水价目表PS素材下载

[网站素材]2026马年蓝金梦幻海报矢量模板

[网站素材]2026马年可爱卡通插画矢量

[网站素材]2026新年喜庆灯笼矢量模板

[网站素材]中式古典园林凉亭风景矢量素材

[网站素材]2026马年创意数字矢量素材

[前端模板]驾照考试驾校HTML5网站模板

[前端模板]驾照培训服务机构宣传网站模板

[前端模板]HTML5房地产公司宣传网站模板

[前端模板]新鲜有机肉类宣传网站模板

[前端模板]响应式天气预报宣传网站模板

[前端模板]房屋建筑维修公司网站CSS模板

[前端模板]响应式志愿者服务网站模板

[前端模板]创意T恤打印店网站HTML5模板

[前端模板]网页开发岗位简历作品展示网页模板

[前端模板]响应式人力资源机构宣传网站模板

相关下载

更多

php商城系统

淘源码商城PHP淘宝查信誉

PHP房产程序[BBWPS]

PHP简约自动发卡平台个人版

ERMEB域名PHP离线网络授权系统

Difeye-敏捷的轻量级PHP框架

大泉州汽车网PHP整站程序

精品课程

更多

相关推荐
/
热门推荐
/
最新课程

最新Python教程从入门到精通

共4课时 | 19万人学习

Django 教程

共28课时 | 3.5万人学习

SciPy 教程

共10课时 | 1.2万人学习

JavaScript ES5基础线上课程教学

共6课时 | 10.5万人学习

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

共79课时 | 151.5万人学习

phpStudy极速入门视频教程

共6课时 | 53.4万人学习

最新Python教程从入门到精通

共4课时 | 18.4万人学习

JavaScript ES5基础线上课程教学

共6课时 | 10.5万人学习

PHP新手语法线上课程教学

共13课时 | 0.9万人学习

最新文章

更多

如何通过 JavaScript 动态显示/隐藏下拉选择关联的表单区块

React Router 页面空白问题的完整解决方案

React Router 配置指南：解决空白页面与路由跳转失效问题

如何使用 JavaScript 根据下拉框选择动态显示或隐藏表单字段

React Router 路由配置错误导致页面空白的完整解决方案

如何在 Node.js 原生 HTTP 服务中动态渲染数组为 HTML 内容

如何通过 JavaScript 动态显示/隐藏下拉菜单关联的表单字段

如何通过下拉选择动态显示或隐藏表单字段（JavaScript 实现）

Bootstrap 5 Modal 不显示？原因及解决方案详解

如何通过 CSS 滤镜实现图片悬停时从灰度恢复全彩效果