图像未在烧瓶中的 HTML 模板上加载 [重复]答案

【问题标题】：Images not loading on HTML template in flask [duplicate]图像未在烧瓶中的 HTML 模板上加载 [重复]
【发布时间】：2021-12-09 22:30:54
【问题描述】：

当我通过 Flask 加载这个 HTML 模板时，没有任何图像加载它。在命令行中看到的图像获取请求返回 404 错误。但是，CSS 文件可以正常加载，即使它们与图像存储在同一个静态文件夹中。 HTML 文件和烧瓶应用程序本身的代码都包含在下面。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Léelo</title>
    <link rel="stylesheet" href="/static/homepagestyle.css">
</head>
<img id="logo" src="/images/Léelo.png" alt="Léelo"><br>
<nav class="menu">
    <ul>
        <li><a href="home.html" target="blank">HOME</a></li>
        <li><a href="libros.html" target="blank">LIBROS</a></li>
        <li><a href="..." target="blank">LITERATURA</a></li>
        <li><a href="..." target="blank">MARKET PLACE</a></li>
    </ul>
</nav>
<p></p>

<body div style="background-image: url(images/background.png);">
    <div class="container">

        <section class="lead">
            <h1>QUIÉNES SOMOS?</h1>
            <p><strong>Lorem Ipsum.</strong> El libro empieza con nuestro narrador contando que cuando tenia solo 6
                años, por algo que leyó en un libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo,
                decide enseñárselo a las personas mayores, pero éstas piensan que es un sombrero. Al no entender su
                dibujó, ellos le dicen que deje de dibujar y mejor se dedique a las matemáticas o la gramática.
                Desilusionado, sigue su consejo.</p><br>
            <h1>CUÁL ES NUESTRA META?</h1>
            <p>El libro empieza con nuestro narrador contando que cuando tenia solo 6 años, por algo que leyó en un
                libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo, decide enseñárselo a las personas
                mayores, pero éstas piensan que es un sombrero. Al no entender su dibujó, ellos le dicen que deje de
                dibujar y mejor se dedique a las matemáticas o la gramática. Desilusionado, sigue su consejo. </p>
        </section>
        <footer>
            <p>Made by: Team Goat</p><br>
        </footer>
    </div>
    <p></p>
</body>

</html>

这是python代码。

import os
import logging

from flask import Flask, render_template
from flask_caching import Cache


# Change the format of messages logged to Stackdriver
logging.basicConfig(format="%(message)s", level=logging.INFO)

config = {
    "DEBUG": True,  # some Flask specific configs
    "CACHE_TYPE": "SimpleCache",  # Flask-Caching related configs
    "CACHE_DEFAULT_TIMEOUT": 300,
}


app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)


@app.route("/")
def home():
    return render_template("home.html")


@app.route("/libros.html")
def homepage():
    return render_template("libros.html")


@app.route("/cache")
@cache.cached(timeout=50)
def cachedpage():
    return "Cached for 50 seconds"


if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

【问题讨论】：

您说图像与 css 位于同一 static 文件夹中，但在您将其位置设置为 /images/ 的路径中，如果您的陈述正确，则应为 @ 987654324@.

标签： python html css flask

【解决方案1】：

我认为您需要将代码更改为：

<img id="logo" src="/static/images/Léelo.png" alt="Léelo"><br>

body 标记的语法也不正确（body 标记内不应有 div 并且 CSS 中缺少单引号）以及错误的路径：

<body style="background-image: url('/static/images/background.png');">

【讨论】：

【解决方案2】：

您忘记在网址前添加 /static。
另外我建议您使用url_for 链接到静态文件。所以你的图片标签是：

<img id="logo" src="{{url_for('static', filename='images/Léelo.png')}}" alt="Léelo"><br> `

你的身体标签应该是：

<body style="background-image: url('{{url_for('static', filename='images/background.png')}}');">

您也可以将链接标签更改为：
<link rel="stylesheet" href="{{url_for('static', filename='images/homepagestyle.css')}}">

【讨论】：