小能豆

<img> 源设置为 flask 静态文件夹之外的文件路径

py

我需要显示一些图像,这些图像文件路径位于存储在网络文件夹中的 flask 静态文件夹之外。

<img src="{{ filepath }}"> # /some/external/network/folder/img.jpg

但是这不起作用,我得到一个损坏的图像图标,但是我可以将图像路径粘贴到浏览器中并确认其可访问。我需要此应用程序能够接受来自任何地方的图像源,因此我无法将静态文件夹更新为网络文件夹。我也无法将图像加载到服务器,因为大约有 20,000 多张照片。

有没有什么办法可以让它工作?


阅读 23

收藏
2024-12-25

共1个答案

小能豆

为了让 Flask 处理并显示存储在网络文件夹中的图像,而不需要将这些图像移到 Flask 的 static 文件夹中,你可以通过创建一个 动态路由 来在 Flask 中直接提供这些图像。这样,客户端可以请求图像,而 Flask 会从网络文件夹中读取并提供该图像。

解决方案:使用 Flask 路由动态提供图像

  1. 创建一个路由来动态提供图像
    你可以使用 Flask 提供的 send_from_directory 函数来动态地从网络文件夹中提供图像,而无需将图像存放到 Flask 的静态文件夹中。

下面是一个示例:

```python
import os
from flask import Flask, send_from_directory

app = Flask(name)

# 定义网络文件夹路径
NETWORK_FOLDER_PATH = r’\network\folder\path\to\images’ # 修改为你实际的网络路径

@app.route(‘/images/‘)
def serve_image(filename):
“”“
从网络文件夹提供图像
filename 作为 URL 路径的一部分传递
“”“
# 检查文件是否存在
file_path = os.path.join(NETWORK_FOLDER_PATH, filename)
if os.path.exists(file_path):
return send_from_directory(NETWORK_FOLDER_PATH, filename)
else:
return ‘文件未找到’, 404

if name == ‘main’:
app.run(debug=True)
```

说明:
- send_from_directory 是 Flask 中用于从指定目录发送文件的函数,它会确保从指定的网络文件夹中读取文件并返回。
- @app.route('/images/<path:filename>') 允许你通过 URL 动态获取网络文件夹中的图像文件,filename 是 URL 路径的一部分。

  1. 在模板中使用 Flask 路由
    在你的 HTML 模板中,你可以通过 url_for 函数来构建动态的图像路径。这种方式允许 Flask 处理图像请求并提供图像文件。

html <img src="{{ url_for('serve_image', filename='img.jpg') }}" alt="Image">

说明:
- url_for('serve_image', filename='img.jpg') 会生成对应的 URL,指向你刚刚创建的 Flask 路由 /images/<filename>,从而实现图像的动态加载。
- 这样,图像会通过 Flask 提供,而不是直接引用网络路径,确保图像能在浏览器中正确显示。

2. 配置和访问网络文件夹

确保服务器能够访问网络文件夹,并且 Flask 有权读取该文件夹中的图像文件。如果网络文件夹在 Windows 上,你可能需要确保 Flask 运行的用户有访问该共享文件夹的权限。

3. 性能考虑

由于你有大量的图像(大约 20,000 张),因此需要注意性能:
- 缓存: 你可以设置缓存头,告诉浏览器缓存图像,减少频繁请求,提高性能。
- 懒加载: 如果网页上有许多图像,考虑使用懒加载技术,只有在需要时才加载图像,这样可以减少初始加载时间。

添加缓存头:

from flask import Response

@app.route('/images/<path:filename>')
def serve_image(filename):
    """
    从网络文件夹提供图像,并设置缓存头
    """
    file_path = os.path.join(NETWORK_FOLDER_PATH, filename)
    if os.path.exists(file_path):
        response = send_from_directory(NETWORK_FOLDER_PATH, filename)
        # 设置缓存头,减少重复加载
        response.cache_control.public = True
        response.cache_control.max_age = 86400  # 缓存 24 小时
        return response
    else:
        return '文件未找到', 404

4. 其他方法:直接使用网络路径

如果你的网络文件夹是公开可访问的,并且可以通过 HTTP 访问,你也可以考虑直接将文件夹映射为一个 URL 进行访问。这通常需要你配置 Web 服务器(如 Nginx 或 Apache),以便它们能直接从网络文件夹提供文件。

例如,如果网络文件夹可以通过 HTTP 访问,你可以直接在 HTML 中使用:

<img src="http://your-server/images/img.jpg" alt="Image">

但是,这种方法通常要求你将 Web 服务器配置为能够访问并提供该文件夹,并且不如 Flask 动态路由的方案灵活和安全。


总结

最推荐的方法是通过 Flask 动态路由提供图像,利用 send_from_directory 来从外部网络文件夹加载图像。这样,你不需要将所有图像移动到 Flask 的静态文件夹中,而且 Flask 会确保对文件的安全访问。

2024-12-25