Waarom verschijnt mijn afbeelding niet op mijn website?

Een pictogram voor een kapotte afbeelding, een leeg vlak en een blijvende tijdelijke aanduiding geven verschillende aanwijzingen. Het bestand kan ontbreken, de browser kan het mogelijk niet weergeven of de pagina verbergt een afbeelding die wel goed geladen is.

Begin met één getroffen afbeelding. Voor de eerste controles gebruik je de website-editor en de browser. Het optionele gedeelte voor websitebeheerders behandelt verzoeken, HTML, CSS en beveiligingsmeldingen van de browser.

Staat de afbeelding op je pagina maar niet in zoekresultaten, lees dan de gids over Google Afbeeldingen. Verschijnt de afbeelding uiteindelijk wel, maar duurt dat te lang, onderzoek dan het traag laden van afbeeldingen.

1. Begin bij de gepubliceerde pagina

Open de openbare pagina in plaats van het voorbeeld in de editor. Controleer daar of de afbeelding geselecteerd is, de wijziging opgeslagen is en de pagina gepubliceerd is. Noteer welke afbeeldingen ontbreken en of het begon na een upload, een nieuw ontwerp of een verhuizing van de website.

Probeer de openbare pagina ook in een privévenster. Een andere uitkomst is een nuttige aanwijzing, al kunnen de aanmeldstatus, opgeslagen gegevens en extensies per venster verschillen.

2. Zoek en test het afbeeldingsadres

Klik met rechts op de ontbrekende afbeelding of het kapotte pictogram en zoek Afbeelding openen in nieuw tabblad of Afbeeldingsadres kopiëren. Bij een achtergrondafbeelding of leeg vlak zijn die opties soms niet beschikbaar.

Je kunt de afbeelding ook in de editor selecteren en de mediagegevens openen. Kopieer de URL van het bestand, niet die van een bijlagepagina of deelpagina in de cloud. Een deelpagina kan de afbeelding in een downloadinterface tonen of een aanmelding vereisen.

De openbare pagina gebruikt mogelijk een miniatuur, een mobiele uitsnede of een kopie bij een aparte afbeeldingsdienst. Vind je alleen het origineel in de mediabibliotheek, gebruik dat dan als uitgangspunt. De Network-controle laat zien welke versie de pagina opvraagt.

Open het afbeeldingsadres zonder in te loggen in een privévenster en kies de volgende stap:

• De afbeelding opent: ga naar de zichtbaarheidscontroles voor de pagina. Leveren die niets op, onderzoek dan het werkelijke verzoek van de pagina.
• Je krijgt een fout, aanmeldpagina of toegangsmelding: ga naar bestandslocatie en toegang.
• Het probleem speelt alleen op een telefoon: ga naar mobiele versies en laden, ook als het origineel opent.
• De browser downloadt het bestand: controleer de responsheaders. Downloadinstellingen kunnen dit gedrag verklaren zonder vast te stellen of de afbeelding in de pagina werkt.

Een geslaagde test in een nieuw tabblad bevestigt dat het bestand in die context kan worden weergegeven. De pagina kan nog steeds een andere versie opvragen of tegen een insluitingsbeperking aanlopen.

3. Herstel het bestand of corrigeer de toegang

Als het bestand ontbreekt of het adres onjuist is

1. Zoek de bedoelde afbeelding in de mediabibliotheek. Vergelijk het bestandsadres met het adres dat faalt. Controleer domein, map, bestandsnaam, extensie en het gebruik van hoofdletters en kleine letters. Sommige servers maken onderscheid tussen Photo.JPG en photo.jpg.
2. Vervang de kapotte selectie in het betreffende afbeeldingsblok of de widget. Kies het bestaande werkende bestand, sla op en publiceer. Is het origineel verwijderd, upload dan eerst een betrouwbaar vervangend bestand.
3. Open de openbare pagina opnieuw. Controleer of die nu naar een werkende afbeelding verwijst. Vraagt de pagina nog een ontbrekende miniatuur op, volg dan hieronder de controle voor gegenereerde formaten.

Vergelijk na een verhuizing ook de afbeeldingshost, niet alleen de bestandsnaam. De pagina verwijst mogelijk nog naar het oude domein of de oude uploadmap. Raadpleeg voor handmatig geschreven paden de technische controles.

Als het origineel werkt maar een miniatuur ontbreekt

Opnieuw uploaden herstelt niet vanzelf een pagina die naar de ontbrekende versie blijft verwijzen. Geef de beheerder de URL van het werkende origineel en van de ontbrekende miniatuur. Vraag om het formaat opnieuw te genereren en de verwijzende afbeeldingslijsten bij te werken. Het Network-paneel geeft de falende URL en de status.

Bijvoorbeeld: ‘Het origineel opent, maar deze pagina vraagt een kleinere versie op die 404 teruggeeft. Herstel dat formaat en controleer de verwijzingen naar responsieve afbeeldingen op de pagina.’ Zo benoem je de reparatie zonder de generatiehulpmiddelen van het platform te hoeven kennen.

Als toegang wordt geweigerd of inloggen nodig is

Bepaal eerst of de afbeelding openbaar hoort te zijn. Kies dan een bestand dat via de normale openbare media-upload van je website is toegevoegd. Een lokaal file:///C:/...-adres, een tijdelijk blob:-voorbeeld of een privélink naar een gedeeld cloudbestand is geen blijvend openbaar afbeeldingsadres.

Stuur bij een 401- of 403-respons de exacte falende URL, de pagina die deze gebruikt en het testtijdstip naar de host. Vraag welke authenticatie- of leveringsregel het verzoek heeft geweigerd. Verlopende links en hotlinkbeveiliging, die insluiten op andere websites beperkt, zijn mogelijke oorzaken. Corrigeer de regel of gebruik de ondersteunde openbare afbeeldings-URL van de aanbieder. Behoud de bedoelde toegangsbeperkingen voor privébestanden.

4. Controleer de zichtbaarheid op de pagina

Opent de afbeelding direct, begin dan bij de instellingen in de pagina-editor:

• Controleer de afbeelding en de bovenliggende sectie. Zoek opties zoals ‘Verbergen op mobiel’ of ‘Alleen desktop’. Een verborgen sectie verbergt ook de afbeeldingen erin.
• Controleer achtergronden apart. Een sectieachtergrond heeft een zichtbare container nodig. Geef een lege sectie in de editor de bedoelde hoogte en controleer daarna de achtergrondpositie en de overlay.
• Bekijk transparante illustraties tegen een andere kleur. Een wit logo kan opgaan in een witte pagina terwijl het correct geladen is. Gebruik de gids over transparantie als het onderwerp onzichtbaar lijkt.

Sla de relevante wijziging op en bekijk de openbare pagina. Ontbreekt de afbeelding nog, gebruik dan de technische controles om een geblokkeerd verzoek te onderscheiden van een afbeelding die de indeling verbergt.

5. Controleer mobiele afbeeldingen en vastgelopen tijdelijke aanduidingen

Als het probleem alleen op een telefoon speelt

Open de mobiele editorweergave en controleer of de afbeelding of sectie verborgen is. Is er een aparte instelling voor een mobiele afbeelding, zorg dan dat die naar een beschikbaar bestand verwijst. Test vervolgens de openbare pagina op de getroffen telefoon.

Websites kunnen meerdere formaten genereren en de browser laten kiezen. Een telefoon vraagt mogelijk een ontbrekende kleine versie op, terwijl een laptop een werkende grote versie gebruikt. Laat de beheerder de geselecteerde URL’s vergelijken bij de werkende en falende schermgroottes en de ontbrekende versie herstellen. Hoe je die selectie vindt, staat bij de technische controles.

Als een afbeelding in beeld een tijdelijke aanduiding blijft

Wachten met laden van een afbeelding lager op de pagina of een nog niet geopende galerijdia kan opzet zijn. Onderzoek het als de afbeelding leeg blijft nadat je ernaartoe hebt gescrold of de dia hebt geopend en tijd hebt gegeven om te laden. Een mislukt verzoek en een verzoek dat nooit begint, vereisen verschillende oplossingen.

Test de betrokken galerij- of lazy-loadinginstelling op één pagina in een testkopie. Komt de afbeelding terug, laat dan eerst die component corrigeren voordat je breder wijzigt. Beoordeel bij de hoofdafbeelding die meteen zichtbaar is of uitgesteld laden passend is. Onze gids over lazy loading legt de keuzes uit.

6. Vergelijk de editor met wat bezoekers ontvangen

Verschijnt de afbeelding alleen in de editor, controleer dan of je de wijziging op de juiste pagina hebt gepubliceerd. Vergelijk daarna het bibliotheekadres met het verzoek van de openbare pagina. Een privévoorbeeld in de editor en een openbaar toegankelijke upload zijn verschillende dingen.

Gebruik na herstel van een verouderde pagina of afbeeldingsverwijzing de gedocumenteerde cacheverversing van je publicatiesysteem voor die pagina of dat bestand. Een content delivery network, of CDN, kan een eigen cache hebben. Je browsergegevens wissen ververst niet de gedeelde cache van de website.

Speelt het probleem alleen in één browserprofiel, test dan zonder extensies en bekijk de websiterechten van dat profiel. Privénavigatie is niet in elke configuratie vrij van extensies. Leg het mislukte verzoek vast voordat je bepaalt of een inhoudsblokker of de leveringsmethode van de website aandacht nodig heeft.

Het beheerdersgedeelte legt testen zonder de normale HTTP-cache van de browser uit. De cachegids van MDN beschrijft browsercaches en gedeelde caches.

7. Pas het bestand aan als formaat of grootte de oorzaak is

Controleer het echte bestandstype en de eisen van de bestemming voordat je een converter kiest. Converteren kan een formaatprobleem oplossen, maar geen ontbrekend adres herstellen of verborgen sectie tonen.

• Het bestand is HEIC of HEIF en de bestemming vereist JPG: maak met HEIC naar JPG een stilstaande afbeeldingskopie. Controleer het resultaat en bewaar het origineel. Een iPhone-foto kan al JPEG zijn, dus controleer eerst het formaat.
• Het platform weigert SVG maar accepteert PNG: maak een PNG-kopie met geschikte pixelafmetingen. Controleer het beeld voor het uploaden.
• Het bestand opent lokaal ook niet: herstel een werkend origineel of exporteer opnieuw vanuit de toepassing die het maakte. Een andere extensie herstelt geen beschadigde gegevens.
• De upload overschrijdt een opgegeven limiet: maak een kopie binnen die limiet. Controleer daarna of de upload voltooid is en de pagina het geüploade bestand gebruikt.

De formatengids van MDN vergelijkt browserondersteuning en mogelijkheden. Ziet een SVG er na export anders uit, lees de SVG-gids. Voor een afbeelding die verschijnt maar niet scherp is, gebruik je de gids over wazige afbeeldingen.

Voorbeeld: een productfoto verdwijnt op mobiel

In dit illustratieve voorbeeld werkt een productfoto na een webshopverhuizing op een laptop, maar verschijnt op een telefoon een kapotte afbeelding. Het origineel in de bibliotheek opent, dus de eigenaar bekijkt het werkelijke afbeeldingsverzoek van de telefoon.

De telefoon kiest /media/blue-mug-640.webp, dat 404 teruggeeft. De laptop gebruikt /media/blue-mug-1280.webp. Bij de verhuizing is het grotere bestand gekopieerd, maar de kleinere versie overgeslagen.

De beheerder genereert het ontbrekende formaat opnieuw, controleert de andere aangeboden versies en werkt zo nodig verouderde paginaverwijzingen bij. De eigenaar herlaadt de openbare pagina op de telefoon en bevestigt dat het gevraagde bestand nu de juiste afbeelding levert. De oorzaak was een ontbrekend gegenereerd bestand; het formaat van het origineel wijzigen zou die verwijzing niet herstellen.

8. Controleer de reparatie als bezoeker

Herhaal de mislukte test op dezelfde openbare pagina, met dezelfde schermgrootte en galerijdia. Controleer of de juiste afbeelding verschijnt en na herladen beschikbaar blijft. Test zonder beheerderslogin als alle bezoekers de afbeelding moeten kunnen zien.

Controleer bij een sjabloon- of leveringswijziging een andere pagina met dezelfde component, op desktop en mobiel. Noteer kort de oorzaak en het bestand of de instelling die je wijzigde.

Moet iemand anders de reparatie afmaken, stuur dan de pagina-URL, geselecteerde afbeeldings-URL, het fouttijdstip, browser- en apparaatgegevens en de relevante foutmelding. Vermeld of de afbeelding werkt in de editor, direct in een nieuw tabblad of bij een andere schermgrootte. Verwijder privétokens en persoonsgegevens uit materiaal dat je openbaar deelt.

Optioneel: technische controles voor websitebeheerders

Kies de controles die passen bij de aanwijzingen hierboven. Ze onderscheiden een onbeschikbaar bestand, een mislukt verzoek en een geladen maar verborgen afbeelding.

Lees het afbeeldingsverzoek in Network

1. Open de getroffen openbare pagina. Kies in het Chrome-menu Meer hulpprogramma’s → Hulpprogramma’s voor ontwikkelaars en daarna Network. Andere browsers hebben vergelijkbare functies.
2. Laat de opname aanstaan en herlaad. Kies het filter Img of zoek op bestandsnaam. Scroll naar de afbeelding of open de galerijdia als dat normaal het laden start.
3. Selecteer het verzoek. Noteer onder Headers de Request URL, status en responsheaders. Gebruik Preview of Response om te bekijken wat terugkwam.
4. Verwijder de filters als er geen resultaat is. De URL kan veranderd zijn, of een script haalt de afbeelding op via Fetch/XHR.

Schakel voor een nieuwe browserdownload Disable cache in, houd de ontwikkelaarstools open en herlaad. Dit omzeilt de normale HTTP-cache van de browser, niet de CDN-cache. Werkt de site met een service worker, controleer diens opgeslagen antwoorden dan apart. Zie de Chrome Network-referentie.

Een status beperkt de zoektocht, maar benoemt niet elke oorzaak. MDN verklaart HTTP-statuscodes en normale 304-validatie. Controleer bij hostnaam- of certificaatfouten de DNS- en HTTPS-instellingen van de afbeeldingshost.

Verwacht echte afbeeldingsgegevens en een passend Content-Type, zoals image/jpeg of image/webp. Een URL die eindigt op .jpg kan HTML teruggeven, terwijl een afbeeldingsdienst via dezelfde extensie terecht een ander beeldformaat kan leveren.

Als het openen van het adres het bestand downloadt

Controleer naast het inhoudstype ook Content-Disposition. Een respons met Content-Disposition: attachment kan bij rechtstreeks openen een download starten. Dat bewijst niet dat de afbeelding binnen een pagina faalt: bekijk ook het ingesloten verzoek. Heb je een downloadlink gekopieerd, gebruik dan de ondersteunde afbeeldings-URL van de host. Zie de Content-Disposition-referentie.

Zoek de geselecteerde responsieve afbeeldings-URL

Klik in Chrome of Edge met rechts op de afbeelding en kies Inspecteren. Selecteer in Elements het echte <img>, niet de omhulling of <picture>. Open Console en typ deze alleen-lezen expressie:

$0.currentSrc

$0 verwijst naar het laatst geselecteerde element in deze tools. Het resultaat is het gekozen afbeeldingsadres, geen garantie dat het laden geslaagd is. Controleer het in Network. De Console Utilities-referentie verklaart $0, en MDN documenteert currentSrc.

Een browser kan een bestand uit srcset of een passende <picture>-bron kiezen. Een werkende src herstelt geen ontbrekende geselecteerde kandidaat. De terugval van picture hangt af van bronvoorwaarden en ondersteuning; reken er niet op dat die een 404 voor het gekozen bestand opvangt. Zie responsieve afbeeldingsselectie en de picture-referentie.

Bepaal de afbeeldingspaden in HTML en CSS

Op https://example.com/services/kitchens/ vragen deze twee bronnen verschillende locaties op, tenzij de pagina een andere basis-URL instelt:

<img src="images/kitchen.jpg" alt="Afgewerkte keuken met eikenhouten kasten">
<img src="/images/kitchen.jpg" alt="Afgewerkte keuken met eikenhouten kasten">

De eerste vraagt /services/kitchens/images/kitchen.jpg op; de tweede /images/kitchen.jpg op die host. Kies het adres dat past bij je echte publicatie, inclusief een eventuele submap als voorvoegsel. MDN verklaart relatieve en absolute paden. In een extern CSS-bestand is een relatieve afbeeldings-URL gebaseerd op het stylesheetadres; zie de CSS-URL-referentie.

Inspecteer de indeling en de manier van laden

Controleer in Elements → Computed de afbeelding en haar bovenliggende elementen op display: none, visibility: hidden, dekking nul, ingeklapte afmetingen, afsnijding of een overlay. Een achtergrondafbeelding geeft een lege container niet de hoogte van de foto. Corrigeer de verantwoordelijke regel in de editor of het bronstylesheet; een tijdelijke wijziging in de tools verdwijnt meestal bij herladen. Zie Chromes gids voor CSS-inspectie en de background-image-referentie.

Staat de echte URL alleen in data-src, controleer dan het script dat de bron instelt en relevante Console-fouten. Geef bij native loading="lazy" passende afmetingen op en zorg dat de afbeelding al voor het laden ruimte in de indeling heeft. De gids voor lazy loading in de browser legt het gedrag uit.

Content Security Policy: controleer of de bedoelde afbeeldingshost past bij img-src, of bij default-src als een specifieke afbeeldingsrichtlijn ontbreekt. Zie de CSP-referentie voor afbeeldingsbronnen.

Gemengde inhoud: een HTTP-afbeeldingsverwijzing op een HTTPS-pagina kan afhankelijk van het gebruik worden opgewaardeerd of geblokkeerd. Controleer of de afbeelding via HTTPS beschikbaar is en werk de verwijzing bij. Zie MDN over gemengde inhoud.

CORS en insluitingsbeleid: een gewone afbeelding van een andere origin tonen en haar pixels via canvas uitlezen stellen verschillende eisen. Toevoegen van crossorigin kan het laden laten mislukken als de host niet de vereiste CORS-respons levert. Controleer de CORS-documentatie voor afbeeldingen en gemelde beperkingen door Cross-Origin Resource Policy.

Veelgestelde vragen

Waarom zie ik de afbeelding wel en bezoekers niet?

Een editor kan een ongepubliceerd of tijdelijk voorbeeld tonen, en je ingelogde sessie kan toegang hebben die bezoekers missen. Test de openbare pagina zonder die aanmelding. Hoort de afbeelding openbaar te zijn, gebruik dan de openbare mediafunctie van de site. Laat anders de weergave met authenticatie controleren.

Waarom opent de afbeelding in een nieuw tabblad maar niet op de pagina?

Vergelijk eerst de exacte adressen: de pagina kan een ander formaat opvragen. Komen ze overeen, controleer dan het ingesloten verzoek op een toegangs- of browserbeleidsfout. Een geslaagd afbeeldingsverzoek wijst vervolgens naar zichtbaarheid en indeling op de pagina.

Bewijst een 200-respons dat de afbeelding werkt?

Nee. Controleer de inhoud van de respons. Een aanmeldpagina met status 200 is geen afbeelding. Bevat de respons het juiste beeld, ga dan verder met relevante Console-meldingen en de weergave op de pagina. De code alleen bevestigt geen zichtbaar resultaat.

Herstellen kleinere afmetingen of compressie een kapotte afbeelding?

Ze helpen als een upload een opgegeven limiet overschrijdt of een te grote afbeelding te langzaam wordt overgedragen. Een verkeerd pad, ontbrekende miniatuur of verborgen sectie vereist een andere reparatie. Stel met de uploadfout of het afbeeldingsverzoek eerst vast wat er misgaat voordat je het bestand wijzigt.

Moet ik het bestand hernoemen of de extensie wijzigen?

Hernoem om een concreet pad- of naamprobleem op te lossen en werk daarna verwijzingen naar de oude naam bij. .heic hernoemen naar .jpg converteert de afbeelding niet. Gebruik een converter als het echte formaat niet wordt ondersteund en bewaar het origineel.

Laten alt-tekst, robots.txt of Search Console de afbeelding verschijnen?

Alt-tekst beschrijft de afbeelding wanneer die niet te zien is; de tekst haalt het bestand niet op. Robots-instructies en Search Console gaan over crawlen en zichtbaarheid in zoekmachines. Ontbreekt een afbeelding voor bezoekers op de pagina, controleer dan eerst bestand, verzoek en indeling.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)