Zo werkt het: CSS en afbeeldingen
Bij je eerste verzoek was één verzoek één antwoord. Met een stylesheet en een afbeelding erbij klopt dat niet meer: de browser krijgt eerst de HTML, leest daarin wat er nog ontbreekt, en haalt dat apart op.
Browser: De browser stuurt een GET naar /foto. Je typt het adres of klikt op een link; de pagina wordt opgevraagd. · Links tussen pagina’s
Server: Jouw functie stuurt het bestand. foto() geeft een FileResponse: de inhoud van static/pages/foto.html, ongewijzigd. · HTML in bestanden
Browser: De browser leest de HTML. Daarin staan een <link> naar CSS en een <img>. Die bestanden heeft hij nog niet. · CSS in een eigen bestand (static files)
Browser: Nog twee verzoeken. Een GET naar /static/css/style.css en een naar /static/kat.jpg, allebei apart. · Afbeeldingen tonen
Server: StaticFiles antwoordt. Zonder een functie van jou: app.mount geeft het bestand door zoals het op schijf staat. · CSS in een eigen bestand (static files)
Browser: De browser tekent alles. Pas als de CSS en de afbeelding binnen zijn, ziet de pagina eruit zoals bedoeld.
In stap 5 draait er geen functie van jou. De verzoeken voor de CSS en de afbeelding beantwoordt app.mount uit CSS in een eigen bestand (static files) zelf. Daarom heb je die ene regel nodig, en daarom heeft een fout in het pad van <link> of <img> niets met je Python-code te maken: de browser vraagt het bestand in stap 4 op bij een adres waar niets staat.
De pagina zelf staat op stap 2 wel achter een functie van jou. Zo kun je per verzoek iets anders terugsturen, en dat doe je in de volgende les met een template. Het volgende diagram, bij één klik, laat zien wat er dan tussen stap 2 en 3 bijkomt.
Zie het zelf
Ga naar /foto uit Afbeeldingen tonen: die pagina heeft een stylesheet én een afbeelding. Open het tabblad Netwerk uit Kijken wat de browser doet en herlaad. Bij je eerste verzoek stond er één regel; nu staan er drie, in de volgorde van het diagram. Als alles goed staat, ziet het er zo uit:
| Naam | Status | Type | Grootte |
|---|---|---|---|
| foto | 200 | document | 503 B |
| style.css | 200 | stylesheet | 290 B |
| kat.jpg | 200 | jpeg | 48,3 kB |
De grootte van kat.jpg hangt af van je eigen foto, en een paar bytes verschil bij de andere is ook normaal; de statuscode is wat telt. Alle drie zijn 200: de pagina kwam van je functie, de CSS en de afbeelding van app.mount.
Als het misgaat
Staat het pad in <img> verkeerd, en heb je Cache uitzetten niet aan, dan kan dezelfde lijst er zo uitzien:
| Naam | Status | Type | Grootte |
|---|---|---|---|
| foto | 200 | document | 503 B |
| style.css | 200 | stylesheet | (schijfcache) |
| kat.jpg | 404 | json | 154 B |
kat.jpgheeft status 404. De browser vroeg het bestand in stap 4, maar op dat adres stond niets: het pad in<img>klopt niet, ofapp.mountontbreekt. Het type isjson, want de foutmelding van FastAPI is JSON, geen plaatje. Je Python-code heeft er niets mee te maken, en de terminal logt het pad dat de browser vroeg, met404erachter.style.csskwam uit de schijfcache. De browser heeft de server niet eens gevraagd en toonde zijn eigen kopie. Soms staat er (geheugencache); dat betekent hetzelfde. Pas je de CSS aan en verandert er niets, dan is dit de reden. Zet het vinkje Cache uitzetten aan zolang je werkt, of herlaad zonder cache.