通过 localhost:5000 访问时标记不起作用,python,html,css,flask"/>
时间戳

首页 > 解决方案 > 通过 localhost:5000 访问时标记不起作用

python - 通过 localhost:5000 访问时标记不起作用

问题描述

最近开始学习html和css，尝试用flask做网页。除了标签，一切都很顺利。

当通过 localhost:5000 或 IP 从网络中的不同设备访问时，我似乎无法让图像显示在 index.html 上。但是，当我在 chrome 上打开 index.html 文件本身时，我可以看到确切的图像。

这是我的目录的样子：

Flask
|
|---templates
|       |
|       |---index.html
|       |
|       |---img
|            |
|            |---slideshow
|                    |
|                    |---1.jpg
|       
|---static
|
|---app.py
|
|---forms.py
|
|---models.py
|
|---routes.py

这是我在 index.html 文件中的 img 标签

<img src = "img/slideshow/1.jpg" style = "width:100%">

我尝试在目录中移动 1.jpg，甚至将其放在与 index.html 相同的文件夹中（在 img 标签中仅使用 1.jpg），但我确定我在 img 标签中的当前路径是正确的因为当我单独打开 index.html 时可以看到图像。

我也尝试过查看图像的权限，并且已经允许所有权限。

我是否必须在我的 route.py 中向此代码添加一些内容？

def index():
    return render_template('index.html', custom_title = "Home")

标签： pythonhtmlcssflask

解决方案

从static目录中提供这些图像，目录结构更像：

Flask
|
|---templates
|       |
|       |---index.html
|       
|---static
|       |
|       |---img
|            |
|            |---slideshow
|                    |
|                    |---1.jpg
|
|---app.py

使用 Flask 的url_for功能将它们包含在您的模板中：

<img src="{{ url_for('static', filename='img/slideshow/1.jpg') }}" style="width:100%" />

推荐阅读