Ga naar hoofdinhoud

Afbeeldingen tonen

In deze les leer je hoe je een afbeelding toont op je HTML pagina.

Afbeelding klaarzetten​

Plaats een afbeelding in je static folder:

je-project/
├── main.py
└── static/
    ├── css/
    │   └── style.css
    ├── pages/
    │   └── foto.html
    └── kat.jpg          ← jouw afbeelding

De img tag​

In je HTML gebruik je de <img> tag:

<img src="/static/kat.jpg" alt="Een kat">
  • src - Het pad naar de afbeelding (via de static folder)
  • alt - Tekst die wordt getoond als de afbeelding niet laadt

Compleet voorbeeld​

Maak static/pages/foto.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Mijn Foto</title>
    </head>
    <body>
        <h1>Kijk naar deze foto!</h1>
        <img src="/static/kat.jpg" alt="Een kat">
    </body>
</html>

En in main.py:

@app.get("/foto")
async def foto():
    return FileResponse("static/pages/foto.html")

Testen​

Ga naar http://127.0.0.1:8000/foto. Je ziet je afbeelding!

Gaat er iets mis?

Afbeelding laadt niet? Controleer of:

  1. De afbeelding echt in de static folder staat
  2. De bestandsnaam exact klopt (let op hoofdletters!)
  3. app.mount("/static", ...) in je code staat

Bekijk de troubleshooting pagina voor meer oplossingen.

Opdrachten​

Opdracht 1: Predict - Wat zie je?​

<img src="/static/logo.png" alt="Logo">

Vraag: Wat zie je als logo.png niet bestaat in de static folder?

Tip

De browser kan de afbeelding niet laden. Waarvoor is het alt attribuut bedoeld?

Antwoord

Je ziet de alt tekst "Logo" en een broken image icoon. De pagina laadt wel, maar de afbeelding niet.

Opdracht 2: Run​

Plaats een afbeelding in je static folder, maak het foto.html bestand uit het voorbeeld, en test of de afbeelding wordt getoond.

Opdracht 3: Investigate - Zonder alt​

Wat zie je als je het alt attribuut weglaat en het bestand niet bestaat? Probeer het uit!

<img src="/static/bestaat_niet.jpg">
Antwoord

Je ziet alleen een broken image icoon zonder tekst. Met alt zie je tenminste nog een beschrijving van wat er had moeten staan. Daarom is alt altijd handig om toe te voegen.

Opdracht 4: Make - Eigen foto​

Plaats een afbeelding in je static folder en maak een pagina die hem toont.

Tip

Zet een .jpg of .png bestand in static/ en verwijs ernaar met <img src="/static/jouw_bestand.jpg" alt="Beschrijving">.

Antwoord

static/pages/mijn_foto.html:

<!DOCTYPE html>
<html>
    <body>
        <h1>Mijn foto</h1>
        <img src="/static/mijn_foto.jpg" alt="Mijn favoriete foto">
    </body>
</html>
@app.get("/mijn_foto")
async def mijn_foto():
    return FileResponse("static/pages/mijn_foto.html")

Opdracht 5: Make - Fotogalerij​

Maak een pagina met drie afbeeldingen onder elkaar. Geef elke afbeelding een titel met een <h3> tag erboven.

Tip

Zet drie afbeeldingen in je static folder. Gebruik voor elke foto een <h3> gevolgd door een <img> tag.

Antwoord
<!DOCTYPE html>
<html>
    <body>
        <h1>Mijn Fotogalerij</h1>

        <h3>Foto 1</h3>
        <img src="/static/foto1.jpg" alt="Eerste foto">

        <h3>Foto 2</h3>
        <img src="/static/foto2.jpg" alt="Tweede foto">

        <h3>Foto 3</h3>
        <img src="/static/foto3.jpg" alt="Derde foto">
    </body>
</html>

Oefen met Python​

Python oefenblok

Dit oefenblok draait pure Python in je browser — geen FastAPI. Oefen hier de Python-concepten die je nodig hebt voor je server.

# Afbeeldingen filteren
bestanden = [
  "foto1.jpg", "logo.png", "style.css",
  "banner.gif", "index.html", "icon.svg",
  "foto2.jpeg", "bg.webp"
]

# Afbeelding-extensies
img_extensies = (".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp")

afbeeldingen = [b for b in bestanden if b.endswith(img_extensies)]
overige = [b for b in bestanden if not b.endswith(img_extensies)]

print(f"Afbeeldingen ({len(afbeeldingen)}):")
for img in afbeeldingen:
  print(f"  🖼️ {img}")

print(f"
Overige ({len(overige)}):")
for b in overige:
  print(f"  📄 {b}")