flask中解决图片不显示的问题(很细微的点)

我在编写flask项目的时候,在编写html的时候,发现不管我的图片路径如何变化,其就是显示不出来。如下图我框中的地方。
在这里插入图片描述
我尝试过使用浏览器打开,是可以的。
在这里插入图片描述
一旦运行这个flask项目,就无法显示了。

我查阅资料后。发现好像得将这些文件放在static文件夹下。以下是对它的解释。


在Flask应用中,通常推荐将静态文件(如图片、CSS文件、JavaScript文件等)放置在static文件夹下,这是一个约定俗成的最佳实践,有几个主要原因:

  1. 静态文件的托管

    • Flask应用本质上是一个Web服务器,它需要能够处理和提供静态文件给客户端(浏览器)。为了使静态文件能够被轻松地识别和访问,将它们放置在static文件夹下是一种组织和管理文件的方式。
  2. URL路径简化

    • 使用static文件夹作为静态文件的根目录,可以简化在HTML或者模板中引用这些文件的路径。例如,如果你将图片11.jpg放置在static文件夹下,你可以使用相对路径<img src="{{ url_for('static', filename='11.jpg') }}" alt="图片">来引用这个图片,而不需要写具体的绝对路径。
  3. Flask提供的静态文件处理机制

    • Flask提供了内置的url_for('static', filename='...')函数,用于动态生成静态文件的URL。这个函数会自动解析到你设置的静态文件目录,因此无需手动拼接路径,提升了代码的可维护性和可读性。
  4. 避免命名冲突和资源管理

    • 将静态文件集中放置在static文件夹下,有助于避免文件命名冲突(例如,同名文件在不同目录下可能会造成混淆)和更好地管理项目资源。

总体来说,将静态文件放置在static文件夹下是一种良好的组织和管理文件的方式,有助于提高项目的结构清晰性和可维护性,同时也是Flask框架推荐的最佳实践之一。


经过将图片放在static目录下,果然显示出来了。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/39929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

泛微开发修炼之旅--29用计划任务定时发送邮件提醒

文章链接&#xff1a;29用计划任务定时发送邮件提醒

[单master节点k8s部署]17.监控系统构建(二)Prometheus安装

prometheus server安装 创建sa账号&#xff0c;对prometheus server进行授权。因为Prometheus是安装在pod里面&#xff0c;以pod的形式去运行的&#xff0c;因此需要创建sa&#xff0c;并对他做rbac授权。 apiVersion: v1 kind: ServiceAccount metadata:name: monitornamesp…

LeetCode热题100刷题4:76. 最小覆盖子串、239. 滑动窗口最大值、53. 最大子数组和、56. 合并区间

76. 最小覆盖子串 滑动窗口解决字串问题。 labuladong的算法小抄中关于滑动窗口的算法总结&#xff1a; class Solution { public:string minWindow(string s, string t) {unordered_map<char,int> need,window;for(char c : t) {need[c];}int left 0, right 0;int …

2.8亿东亚五国建筑数据分享

数据是GIS的血液&#xff01; 我们现在为你分享东亚5国的2.8亿条建筑轮廓数据&#xff0c;该数据包括中国、日本、朝鲜、韩国和蒙古5个东亚国家完整、高质量的建筑物轮廓数据&#xff0c;你可以在文末查看领取方法。 数据介绍 虽然开源的全球的建筑数据已经有微软的建筑数据…

vxe-table的序号一样

使用vxe-table的时候&#xff0c;有的时候会出现序号相同的现象&#xff0c;这种现象一般出现在我们后面自己添加的行中&#xff0c;就像这种 此时的这三个序号是相同的&#xff0c;我来说一下原因&#xff0c;这是在添加新的一行的时候&#xff0c;有的时候数据很多&#xff0…

Mac 运行 Windows 软件,Parallels Desktop 19和 CrossOver 24全面对比

Parallels Desktop 和 CrossOver 都是能满足你「在 Mac 上运行 Windows 软件」需求的工具。可能很多人都已经知道 Parallels Desktop 是「虚拟机」&#xff0c;但 CrossOver 其实并不是「虚拟机」。这两款软件有相同的作用&#xff0c;但由于实现原理的不同&#xff0c;两者也有…

系统提示我未定义与 ‘double‘ 类型的输入参数相对应的函数 ‘finverse‘,如何解决?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

TCP粘包解决方法

一. 产生原因及解决方法 产生原因&#xff1a;TCP是面向连接、基于字节流的协议&#xff0c;其无边界标记。当服务端处理速度比不其接收速度时&#xff0c;就很容易产生粘包现象。 解决方法&#xff1a;目前主要有两种解决方法&#xff0c;一个是在内容中添加分割标识&#xf…

人脸识别考勤系统

人脸识别考勤系统是一种利用生物识别技术进行自动身份验证的现代解决方案&#xff0c;它通过分析和比对人脸特征来进行员工的出勤记录。这种系统不仅提升了工作效率&#xff0c;还大大减少了人为错误和欺诈行为的可能性。 一、工作原理 人脸识别考勤系统的核心在于其生物识别…

管道支架安装

工程结构施工完毕后&#xff0c;系统管道安装完毕后的第一步任务就是管道支架的制作安装&#xff0c;作为对管道固定和承重作用至关重要的支、托、吊架&#xff0c;有些项目部在施工中却往往因为对它们的重要性认识不足&#xff0c;因存在侥幸心里或经验主义&#xff0c;导致支…

技术探索:利用Python库wxauto实现Windows微信客户端的全面自动化管理

项目地址&#xff1a;github-wxauto 点击即可访问 项目官网&#xff1a;wxauto 点击即可访问 &#x1f602;什么是wxauto? wxauto 是作者在2020年开发的一个基于 UIAutomation 的开源 Python 微信自动化库&#xff0c;最初只是一个简单的脚本&#xff0c;只能获取消息和发送…

掌握MySQL基础命令:数据更新操作详细操作(数据的增删改)

MySQL数据修改是指使用SQL语句&#xff08;如UPDATE、INSERT、DELETE&#xff09;对数据库表中的数据进行更改、添加或删除的操作&#xff0c;常见的操作包括更新表中的记录、插入新记录以及删除现有记录 。 一、数据插入 1插入完整的数据记录 2插入非完整的数据记录 3插入多…

macOS使用Karabiner-Elements解决罗技鼠标G304连击、单击变双击的故障

记录一下罗技鼠标G304单击变双击的软件解决过程和方案&#xff08;适用于macOS&#xff0c; 如果是Windows&#xff0c;使用AutoHotKey也有类似解决办法、方案&#xff0c;改日提供&#xff09;&#xff1a; 背景&#xff1a;通过罗技Logitech G HUB软件对罗技的游戏鼠标侧键b…

摄像机反求跟踪软件/插件 Mocha Pro 2024 v11.0.2 CE Win

AE/PR/OFX/达芬奇/AVX插件 | 摄像机反求跟踪软件Mocha Pro 2024 v11.0.2 CE Win-PR模板网 Mocha Pro 软件(插件)&#xff0c;用于平面运动跟踪、3D跟踪、动态观察、对象移除、图像稳定和PowerMesh有机扭曲跟踪等功能。整合了SynthEyes核心的3D跟踪算法&#xff0c;能够快速自动…

k8s-第四节-Service

Service Service 通过 label 关联对应的 PodServcie 生命周期不跟 Pod 绑定&#xff0c;不会因为 Pod 重创改变 IP提供了负载均衡功能&#xff0c;自动转发流量到不同 Pod可对集群外部提供访问端口集群内部可通过服务名字访问 创建 Service kubectl apply -f service.yamlkub…

003-基于Sklearn的机器学习入门:回归分析(上)

本节及后续章节将介绍机器学习中的几种经典回归算法&#xff0c;所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇&#xff0c;将介绍基础的线性回归方法&#xff0c;包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归&#xff08;Regression&…

11 - matlab m_map地学绘图工具基础函数 - 绘制航迹、椭圆、风向玫瑰图和特定的圆形区域的有关函数及其用法

11 - matlab m_map地学绘图工具基础函数 - 绘制航迹、椭圆、风向玫瑰图和特定的圆形区域的有关函数及其用法 0. 引言1. 关于m_track2. 关于m_range_ring3. 关于m_ellipse4. 关于m_windrose5. 结语 0. 引言 本篇介绍下m_map中绘制航迹图函数&#xff08;m_track&#xff09;、绘…

python 发布应用程序包

文章目录 发布python包toml配置文件构建发布python包 官方文档参考 将自己的python项目发布成源码包或者wheel二进制包,供其他开发者使用。 方式: 使用py工具; distutils,该工具的使用已过时;setuptools,常用方式;wheel,在setuptools的基础上添加了 bdist_wheel, …

【BUUCTF-PWN】4-ciscn_2019_n_1

参考&#xff1a;BUUCTF-ciscn_2019_n_1 - 纸鸢asahi - 博客园 (cnblogs.com) buuctf 刷题记录_PWN ciscn_2019_n_1 - MuRKuo - 博客园 (cnblogs.com) 从题海中入门&#xff08;四&#xff09;ciscn_2019_n_1 - FreeBuf网络安全行业门户 ciscn_2019_n_1 ——两种解法_0x4134800…

Generative Modeling by Estimating Gradients of the Data Distribution

Generative Modeling by Estimating Gradients of the Data Distribution 本文介绍宋飏提出的带噪声扰动的基于得分的生成模型。首先介绍基本的基于得分的生成模型的训练方法&#xff08;得分匹配&#xff09;和采样方法&#xff08;朗之万动力学&#xff09;。然后基于流形假…