Rare." 2023-08-26 23:53 采纳率: 0%
浏览 37

flask+html本地图片显示不出来

img

img

img

img


就是我的图片也是放在static文件下，但是我依旧在网站中显示不出来，这是怎么回事？然后网上有人说在html中添加static_url_path=''，我也添加了，但是依然不行

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-08-27 09:02
    关注

    【以下回答由 GPT 生成】

    要在Flask和HTML中显示本地图片，您可以按照以下步骤操作：

    1. 首先确保您的图像文件位于Flask应用程序的static文件夹中。例如，将图像文件命名为image.jpg并将其放在static文件夹中。

    2. 在Flask应用程序中，使用render_template函数将图像文件的路径传递给HTML模板。更新您的Flask应用程序代码如下：

    from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    img_paths = [
        '/static/image.jpg'
    ]
    return render_template('index.html', img_paths=img_paths)

if __name__ == '__main__':
    app.run()

    这个代码块中，我们在index路由函数中定义了一个变量img_paths，包含您想要显示的图像文件的路径。在这种情况下，仅有一张图片，所以只有一个路径。将路径'/static/image.jpg'作为参数传递给render_template函数。

    1. 更新您的HTML模板文件，以显示图像。根据您的需求，您可以在不同位置和样式上显示多个图像。以下示例演示如何在<img>元素中添加图像路径：
    <!DOCTYPE html>
<html>
<head>
    <title>Flask Image Display</title>
</head>
<body>
    <p></p>
    <p class="md_img_container"><img class="md_img" src="{{ img_paths[0] }}" alt="img" align="left" /></p>
    <p></p>
    <p></p>
    <p class="md_img_container"><img class="md_img" src="{{ img_paths[0] }}" alt="img" align="left" /></p>
    <p></p>
    <p></p>
    <p class="md_img_container"><img class="md_img" src="{{ img_paths[0] }}" alt="img" align="left" /></p>
    <p></p>
    <p></p>
    <p class="md_img_container"><img class="md_img" src="{{ img_paths[0] }}" alt="img" align="left" /></p>
    <br />
    就是我的图片也是放在static文件夹下，但是我依旧在网站中显示不出来，这是怎么回事？然后网上有人说在html中添加`static_url_path=''`，我也添加了，但是依然不行。
</body>
</html>

    在这个更新后的HTML文件中，我们使用{{ img_paths[0] }}来代替图像路径的值。这样，Flask将会将路径替换为实际图像文件的URL。

    1. 最后，确保启动您的Flask应用程序。在命令行中使用python your_app.py或flask run启动应用程序。

    这样，当您访问网站的根URL时，您应该能够在网页上看到显示的图像。

    希望这可以帮助您解决问题！如果您有其他疑问，请随时向我提问。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 8月26日

悬赏问题

  • ¥15 QQ邮箱过期怎么恢复？
  • ¥15 登录他人的vue项目显示服务器错误
  • ¥15 (标签-android|关键词-app)
  • ¥60 如何批量获取json的url
  • ¥15 comsol仿真压阻传感器
  • ¥15 Python线性规划函数optimize.linprog求解为整数
  • ¥15 llama3中文版微调
  • ¥15 pg数据库导入数据序列重复
  • ¥15 三分类机器学习模型可视化分析
  • ¥15 本地测试网站127.0.0.1 已拒绝连接，如何解决？(标签-ubuntu)