Ga naar hoofdinhoud

Afbeeldingen tonen

Hier bouw je op verder: Afbeeldingen in HTML

Weet je dit niet meer zeker? Lees het terug voordat je verdergaat.

Voor een foto op je pagina heb je twee dingen nodig: het bestand in je static-map en één HTML-tag.

Afbeelding klaarzetten​

Zoek een afbeelding op internet, klik er met de rechtermuisknop op en kies Afbeelding opslaan als… (Save image as…). Sla hem op in de map static van je project, onder de naam kat.jpg:

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

De img tag​

In je HTML gebruik je de <img> tag:

static/pages/foto.htmlgaat zoals hij is naar de browser
<img src="/static/kat.jpg" alt="Een kat">
  • src is het pad naar de afbeelding, via de static-map.
  • In alt staat de tekst die de browser laat zien als de afbeelding niet laadt.

Compleet voorbeeld​

Maak static/pages/foto.html:

static/pages/foto.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <head>
        <title>Mijn Foto</title>
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body>
        <h1>Kijk naar deze foto!</h1>
        <img src="/static/kat.jpg" alt="Een kat">
    </body>
</html>

Zet in main.py een endpoint erbij:

main.pydraait op de server
@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-map staat
  2. De bestandsnaam precies klopt, ook de hoofdletters en de extensie. Windows verbergt de extensie vaak: dan heet je bestand kat.jpg.jpg terwijl je kat.jpg ziet, of kat.webp terwijl je kat ziet. In de Verkenner van VS Code zie je de echte naam.
  3. app.mount("/static", ...) in je code staat

Meer oplossingen staan op Er gaat iets mis.

Zo ziet je main.py er nu uit

Dit is je hele main.py na deze les, zonder wat je in de opdrachten maakte.

main.pydraait op de server
from fastapi import FastAPI
from fastapi.responses import FileResponse, HTMLResponse
from fastapi.staticfiles import StaticFiles

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

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

@app.get("/info")
async def info():
    return {"naam": "Jouw Naam", "leeftijd": 16}

@app.get("/pagina", response_class=HTMLResponse)
async def pagina():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Mijn Pagina</title>
        </head>
        <body>
            <h1>Hallo!</h1>
            <p>Dit is mijn eerste HTML pagina.</p>
        </body>
    </html>
    """

@app.get("/styled", response_class=HTMLResponse)
async def styled():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Met CSS</title>
            <style>
                h1 { color: blue; }
                p { color: gray; }
            </style>
        </head>
        <body>
            <h1>Gestylede pagina</h1>
            <p>Deze tekst is grijs.</p>
        </body>
    </html>
    """

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

DIEREN = {
    "kat": "Een kat spint als hij tevreden is.",
    "hond": "Een hond kwispelt als hij blij is.",
    "vis": "Een vis ademt met kieuwen.",
}

@app.get("/dier/{naam}", response_class=HTMLResponse)
async def dier(naam: str):
    tekst = DIEREN.get(naam, "Dit dier staat nog niet op de site.")
    return f"""
    <!DOCTYPE html>
    <html>
        <body>
            <h1>Over dieren</h1>
            <p>{tekst}</p>
            <a href="/">Terug naar Home</a>
        </body>
    </html>
    """

@app.get("/zoek")
async def zoek(term: str):
    return {"je_zocht": term}

@app.get("/foto")
async def foto():
    return FileResponse("static/pages/foto.html")
Controlevraag
Je zet kat.jpg in een nieuwe map static/img. In foto.html laat je src="/static/kat.jpg" staan. Wat zie je op /foto?
Kies wat jij denkt. Bij het goede antwoord zie je de uitleg.
Controleer je server

Laat je server draaien en typ in een tweede terminal python controleer.py css-en-afbeeldingen. Het script kijkt of alles uit dit hoofdstuk werkt; je downloadt het op Project checken.

Opdrachten​

Opdracht 1: Predict - Wat zie je?​

static/pages/foto.htmlgaat zoals hij is naar de browser
<img src="/static/logo.png" alt="Logo">
Voorspel
Wat zie je als logo.png niet in de map static staat?
Kies wat jij denkt. Bij het goede antwoord zie je de uitleg.

Opdracht 2: Run​

Ga naar http://127.0.0.1:8000/static/kat.jpg. Zie je alleen de afbeelding, zonder pagina eromheen? Dan geeft app.mount het bestand goed door. Ga daarna naar /foto: staat hij nu op je pagina, onder de kop?

Opdracht 3: Investigate - Zonder alt​

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

static/pages/foto.htmlgaat zoals hij is naar de browser
<img src="/static/bestaat_niet.jpg">
Antwoord

Je ziet alleen het icoon van een kapotte afbeelding, zonder tekst. Met alt lees je tenminste nog wat er had moeten staan, dus zet hem er altijd bij.

Opdracht 4: Make - Eigen foto​

Zet een afbeelding in je static-map en maak een pagina die hem laat zien.

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.htmlgaat zoals hij is naar de browser
<!DOCTYPE html>
<html>
    <body>
        <h1>Mijn foto</h1>
        <img src="/static/mijn_foto.jpg" alt="Mijn favoriete foto">
    </body>
</html>
main.pydraait op de server
@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-map. Gebruik voor elke foto een <h3> gevolgd door een <img> tag.

Antwoord
static/pages/galerij.htmlgaat zoals hij is naar de browser
<!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>
main.pydraait op de server
@app.get("/galerij")
async def galerij():
    return FileResponse("static/pages/galerij.html")