Flask项目如何实现图片与div同行显示且正常加载

1. 修复图片无法显示问题 #

图片不显示的核心原因是文件名拼写不一致：

• 实际存储的文件路径为 static/images/thump.png
• 模板代码中引用的文件名写为了 thumup.png，多出了一个字母u
  只需要把url_for里的filename参数修改为和实际文件名完全一致即可。

2. 修复图片换行展示问题 #

div属于块级元素，默认会独占整行宽度，因此放在div外部的img标签会自动换行到下一行展示。你只需将img标签移到div内部，紧跟在results:文本之后，就能实现图片和文本同行展示。

修改后完整代码 #

<div class="recommendation">results: <img src="{{url_for('static', filename='images/thump.png')}}" /></div>

如果修改后仍无法正常显示图片，可额外排查两个点：

• 确认Flask没有自定义修改static_folder、static_url_path相关配置，使用默认静态文件配置即可
• 打开浏览器开发者工具的网络面板，查看图片请求的实际路径和返回状态，排查路径匹配问题

内容的提问来源于stack exchange，提问作者marlon