Images not loading on HTML template in flask-CodePudding

When I load this HTML template via Flask, none of the images load with it. The get requests for images as seen in the command line return a 404 error. However, the CSS files load fine, even though they are stored in the same static folder as the images. Code for both the HTML file and the flask application itself are included below.

<!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>

Here is the python code.

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)))

CodePudding user response：

I think you need to change your code to:

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

Also the syntax of the body tag is incorrect (Shouldn't have div within the body tag and missing single quotes in the CSS) as well as the wrong path:

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

CodePudding user response：

You forgot to prepend /static to the url.
Also I would advise you to link to static files using url_for. So your image tag would be:

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

And your body tag should be:

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

Also you can change the link tag to:
<link rel="stylesheet" href="{{url_for('static', filename='images/homepagestyle.css')}}">