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,一经查实,立即删除!

相关文章

简易版async/await

参考&#xff1a;https://juejin.cn/post/7007031572238958629?searchId20240704101813568E9B5B1013C881A239#heading-15 总结一下async/await的知识点 1、 await只能在async函数中使用&#xff0c;不然会报错 2、 async函数返回的是一个Promise对象&#xff0c;有无值看有…

泛微开发修炼之旅--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…

k8s-第九节-命名空间

命名空间 如果一个集群中部署了多个应用&#xff0c;所有应用都在一起&#xff0c;就不太好管理&#xff0c;也可以导致名字冲突等。 我们可以使用 namespace 把应用划分到不同的命名空间&#xff0c;跟代码里的 namespace 是一个概念&#xff0c;只是为了划分空间。 # 创建命…

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;你可以在文末查看领取方法。 数据介绍 虽然开源的全球的建筑数据已经有微软的建筑数据…

elementUI中table组件固定列时会渲染两次模板内容问题

今天在使用elementUI的table组件时&#xff0c;由于业务需要固定表格的前几项列&#xff0c;然后获取表格对象时发现竟然有两个对象。 查阅资料发现&#xff0c;elementUI的固定列的实现原理是将两个表格拼装而成&#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;欢迎大家关注&&收藏&&…

Kubernetes 部署简单的应用

Kubernetes 部署简单的应用 Kubernetes 是一个强大的容器编排平台&#xff0c;它可以帮助我们自动化应用程序的部署、扩展和管理。在本期文章中&#xff0c;我们将学习如何使用 Kubernetes 部署一个简单的应用程序。 1. 环境准备 确保你已经安装了 Kubernetes 集群&#xff…

【python模块】argparse

文章目录 argparse模块介绍基本用法add_argument() argparse模块介绍 argparse 模块是 Python 标准库中的一个用于编写用户友好的命令行接口&#xff08;CLI&#xff09;的模块。它允许程序定义它所需要的命令行参数&#xff0c;然后 argparse 会自动从 sys.argv 解析出那些参…

TCP粘包解决方法

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

人脸识别考勤系统

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

深入剖析Python中的Pandas库:通过实战案例全方位解读数据清洗与预处理艺术

引言 随着大数据时代的到来&#xff0c;数据的质量直接影响到最终分析结果的可靠性和有效性。在这个背景下&#xff0c;Python凭借其灵活强大且易于上手的特点&#xff0c;在全球范围内被广泛应用于数据科学领域。而在Python的数据处理生态中&#xff0c;Pandas库无疑是最耀眼…

高级策略:解读 SQL 中的复杂连接

了解基本连接 在深入研究复杂连接之前&#xff0c;让我们先回顾一下基本连接的基础知识。 INNER JOIN&#xff1a;根据指定的连接条件检索两个表中具有匹配值的记录。LEFT JOIN&#xff1a;从左表检索所有记录&#xff0c;并从右表中检索匹配的记录&#xff08;如果有&#x…

管道支架安装

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

NIO为什么会导致CPU100%?

1. Java IO 类型概览 BIO&#xff1a;阻塞I/O&#xff0c;每个连接一个线程&#xff0c;简单但遇到高并发时性能瓶颈明显。NIO&#xff1a;非阻塞I/O&#xff0c;JDK 1.4引入&#xff0c;一个线程处理多个IO操作&#xff0c;提高资源利用率和系统吞吐量。AIO&#xff1a;异步I…

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

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

kpatch Patch Author Guide

kpatch Patch Author Guide Because kpatch-build is relatively easy to use, it can be easy to assume that a successful patch module build means that the patch is safe to apply. But in fact that’s a very dangerous assumption. 由于 kpatch-build 比较容易使用…