Ik zie een rood kruisje in plaats van mijn foto!

Zeven vragen die je helpen de oorzaak van zo’n rood kruisje op het spoor te komen.

Een van de meest frustrerende dingen is als je steeds maar een rood kruisje te zien krijgt in plaats van een foto of afbeelding. Wat je ook doet, je foto komt maar niet te voorschijn:

Zo’n rood kruisje wil niets anders zeggen dan dat je browser de afbeelding waarnaar je in je html-code verwijst, niet kan vinden. Hieronder een checklist om je te helpen de oorzaak van het probleem te achterhalen.

Checklist

1. Heb je de afbeelding wel geüpload naar de server van je webhost? (Toegegeven, een beetje voor de hand liggend, maar even voor de zekerheid.)

2. Komt de naam van de afbeelding wel exact overeen met de naam zoals je die in de html-code voor je afbeelding hebt neergezet? (Als de naam in je code niet precies hetzelfde is, dus als je een beginhoofdletter hebt geschreven, terwijl de naam van de afbeelding zelf alleen kleine letters bevat, dan zal de afbeelding niet te zien zijn.)

3. Klopt de extensie wel die je in je html-code hebt aangegeven? (Is je afbeelding bijvoorbeeld inderdaad een .jpg en geen .png?)

4. Bestaat het lettertype van de extensie inderdaad wel uit kleine letters of juist uit hoofdletters? (De extensie van sommige afbeeldingen is .JPG en niet .jpg.)

5. Bevat de naam van je afbeelding geen spaties? (Browsers zetten spaties soms om in de tekencombinatie %20, het is daarom beter helemaal geen spaties te gebruiken, maar in plaats daarvan te kiezen voor streepjes bijvoorbeeld. Ook apostrofs en aanhalingstekens kun je beter niet gebruiken.)

6. Heb je je foto’s in een speciale map gezet, en heb je de naam van die map wel goed opgenomen in je html-code? (Zet je je foto's allemaal in een map die ‘Afbeeldingen’ heet, let er dan op dat de html-afbeeldingscode begint met: Afbeeldingen/. Achter de forward-slash komt dan pas de naam van je foto of afbeelding te staan.) En let ook hierbij natuurlijk weer goed op het gebruik van hoofdletters/kleine letters en vermijd spaties en apostrofs of aanhalingstekens!

7. Heb je je pagina ververst? (Als je de code hebt aangepast, alles goed hebt gecontroleerd en de foto is nog steeds niet te zien, dan zou je je browserscherm even moeten verversen. Dat doe je in Internet Explorer door op de knop met de twee groene pijltjes rechts naast de URL-balk te klikken. In Chrome is het de knop met de ronde pijl direct links naast het huisje en in Firefox de knop met de blauwe ronde pijl, ook links van het huisje.)