Varför syns inte bilden på min webbplats?

En symbol för en trasig bild, en tom yta och en platshållare som aldrig försvinner ger olika ledtrådar. Filen kan saknas, webbläsaren kanske inte kan visa den eller sidan kan dölja en bild som faktiskt har lästs in.

Börja med en bild som inte fungerar. De första kontrollerna görs i webbplatsens redigerare och webbläsaren. Det valfria avsnittet för webbansvariga behandlar förfrågningar, HTML, CSS och webbläsarens säkerhetsmeddelanden.

Om bilden syns på sidan men saknas i sökresultaten, läs guiden om Google Bilder. Om den till slut visas men tar för lång tid, undersök långsam bildinläsning.

1. Börja med den publicerade sidan

Öppna den offentliga sidan i stället för redigerarens förhandsvisning. Kontrollera i redigeraren att bilden är vald, ändringen sparad och sidan publicerad. Anteckna vilka bilder som berörs och om problemet började efter en uppladdning, en omdesign eller en flytt av webbplatsen.

Prova också den offentliga sidan i ett privat fönster. Ett annat resultat är en användbar ledtråd, men inloggning, lagrade data och tillägg kan skilja sig mellan fönstren.

2. Hitta och testa bildadressen

Högerklicka på den saknade bilden eller dess felsymbol och leta efter Öppna bild i ny flik eller Kopiera bildadress. Alternativen kanske inte finns för en bakgrundsbild eller en tom platshållare.

Du kan också välja bilden i redigeraren och öppna dess medieuppgifter. Kopiera filens webbadress, inte adressen till en bilagesida eller delningssida i molnet. En delningssida kan visa bilden i ett nedladdningsgränssnitt eller kräva inloggning.

Den offentliga sidan kan använda en miniatyrbild, en mobil beskärning eller en kopia hos en separat bildtjänst. Hittar du bara originalet i mediebiblioteket, använd det som utgångspunkt. Network-kontrollen visar vilken version sidan begär.

Öppna bildadressen i ett privat fönster utan att logga in och välj nästa steg:

• Bilden öppnas: gå till kontrollerna av sidans synlighet. Om de inte visar något, undersök sidans faktiska bildförfrågan.
• Du får ett fel, en inloggningssida eller en åtkomstvarning: gå till filplats och åtkomst.
• Problemet uppstår bara på en telefon: gå till mobilversioner och inläsning, även om originalet öppnas.
• Webbläsaren laddar ned filen: gå till kontrollen av svarshuvuden. Nedladdningsinställningar kan förklara beteendet utan att fastställa om bilden fungerar inuti sidan.

Ett lyckat test i en ny flik bekräftar att filen kan visas i det sammanhanget. Sidan kan fortfarande begära en annan version eller stöta på en begränsning för inbäddning.

3. Återställ filen eller rätta åtkomsten

Om filen saknas eller adressen är fel

1. Hitta rätt bild i mediebiblioteket. Jämför filadressen med den som inte fungerar. Kontrollera domän, mapp, filnamn, filändelse samt stora och små bokstäver. Vissa servrar skiljer mellan Photo.JPG och photo.jpg.
2. Byt den trasiga bildreferensen i det berörda bildblocket eller widgeten. Välj den befintliga fil som fungerar, spara och publicera. Om originalet raderats, ladda först upp en pålitlig ersättning.
3. Öppna den offentliga sidan igen. Kontrollera att den nu hänvisar till en fungerande bild. Om den fortfarande begär en saknad miniatyrbild, följ kontrollen av genererade storlekar nedan.

Efter en webbplatsflytt ska du jämföra bildvärden utöver filnamnet. Sidan kan fortfarande hänvisa till den gamla domänen eller uppladdningsmappen. För manuellt skrivna sökvägar, se de tekniska kontrollerna.

Om originalet fungerar men en miniatyrbild saknas

En ny uppladdning reparerar inte nödvändigtvis en sida som fortfarande anger den saknade versionen. Ge webbansvarig adressen till det fungerande originalet och den saknade miniatyrbilden. Be att den saknade storleken genereras på nytt och att bildlistor som hänvisar till den uppdateras. Network-panelen visar den felande adressen och statusen.

Till exempel: ”Originalet öppnas, men sidan begär en mindre version som ger 404. Återställ den storleken och kontrollera sidans responsiva bildreferenser.” Då framgår vilken reparation som behövs utan att du måste känna till plattformens verktyg för bildgenerering.

Om åtkomsten nekas eller inloggning krävs

Avgör först om bilden ska vara offentlig. Välj i så fall en fil som lagts till genom webbplatsens vanliga uppladdning av offentliga medier. En lokal file:///C:/...-adress, en tillfällig blob:-förhandsvisning eller en privat delningslänk i molnet är ingen permanent offentlig bildadress.

Vid ett 401- eller 403-svar skickar du den exakta felande adressen, sidan som använder den och testtidpunkten till webbhotellet. Fråga vilken autentiserings- eller leveransregel som nekade förfrågan. Länkar med begränsad giltighet och hotlink-skydd, som begränsar inbäddning på andra webbplatser, är möjliga orsaker. Rätta regeln eller använd leverantörens stödda offentliga bildadress. Behåll avsedda åtkomstkontroller för privata filer.

4. Kontrollera bildens synlighet på sidan

Om bilden öppnas direkt börjar du med inställningarna i sidredigeraren:

• Kontrollera bilden och dess överordnade sektion. Leta efter val som ”Dölj på mobil” eller ”Endast dator”. En dold sektion döljer även bilderna inuti.
• Kontrollera bakgrunder separat. En sektionsbakgrund behöver en synlig behållare. Ge en tom sektion avsedd höjd i redigeraren och kontrollera sedan bakgrundens placering och överlägg.
• Granska transparent grafik mot en annan färg. En vit logotyp kan smälta in i en vit sida trots att den läses in korrekt. Använd guiden om transparens om motivet verkar osynligt.

Spara den relevanta ändringen och granska den offentliga sidan. Saknas bilden fortfarande, använd de tekniska kontrollerna för att skilja en blockerad förfrågan från en bild som layouten döljer.

5. Kontrollera mobilbilder och platshållare som fastnat

Om problemet bara uppstår på telefonen

Öppna redigerarens mobilvy och kontrollera om bilden eller sektionen är dold. Finns det en separat inställning för mobilbilden, se till att den hänvisar till en tillgänglig fil. Testa sedan den offentliga sidan på den berörda telefonen.

Webbplatser kan skapa flera storlekar och låta webbläsaren välja. En telefon kan begära en saknad liten version medan en bärbar dator använder en fungerande stor version. Be webbansvarig jämföra valda adresser vid fungerande och felande skärmstorlekar och sedan återställa den saknade versionen. Att hitta den valda versionen förklaras i de tekniska kontrollerna.

Om en bild i det synliga området förblir en platshållare

Att vänta med en bild längre ned på sidan eller en ännu oöppnad galleribild kan vara avsiktligt. Undersök när bilden förblir tom efter att du nått den eller öppnat rätt galleribild och gett den tid att laddas. En misslyckad förfrågan och en som aldrig startar behöver olika lösningar.

Testa den berörda galleri- eller lazy-loading-inställningen på en enda sida i en testkopia. Om bilden återkommer, låt webbansvarig rätta komponenten innan ändringen sprids. För huvudbilden som syns direkt när sidan öppnas bör du bedöma om fördröjd inläsning är lämplig. Vår guide om lazy loading förklarar alternativen.

6. Jämför redigeraren med besökarnas sida

Om bilden bara syns i redigeraren, kontrollera att du publicerade bildändringen på rätt sida. Jämför sedan mediebibliotekets adress med den offentliga sidans förfrågan. En privat förhandsvisning och en offentligt tillgänglig uppladdning är olika saker.

Efter att ha rättat en inaktuell sida eller bildreferens använder du publiceringssystemets dokumenterade cacheuppdatering för berörd sida eller fil. Ett innehållsleveransnätverk, CDN, kan ha en egen cache. Att rensa webbläsardata uppdaterar inte webbplatsens delade cache.

Om felet bara finns i en webbläsarprofil, testa utan tillägg och granska profilens webbplatsbehörigheter. Privat surfning är inte automatiskt fri från tillägg i alla konfigurationer. Spara den misslyckade förfrågan innan du avgör om en innehållsblockerare eller webbplatsens leveransmetod behöver åtgärdas.

Avsnittet för webbansvariga förklarar test utan webbläsarens vanliga HTTP-cache. MDN:s cacheguide beskriver webbläsarcache och delade cacheminnen.

7. Ändra filen när format eller storlek orsakar felet

Kontrollera den verkliga filtypen och destinationens krav innan du väljer en konverterare. Konvertering kan lösa ett formatproblem, men inte återställa en saknad adress eller visa en dold sektion.

• Filen är HEIC eller HEIF och destinationen kräver JPG: använd HEIC till JPG för att skapa en stillbildskopia. Kontrollera resultatet och behåll originalet. Ett iPhone-foto kan redan vara JPEG, så kontrollera formatet först.
• Plattformen avvisar SVG men accepterar PNG: skapa en PNG-kopia med lämpliga pixelmått. Granska grafiken före uppladdning.
• Filen öppnas inte heller lokalt: återställ ett fungerande original eller exportera på nytt från programmet som skapade den. En ändrad filändelse reparerar inte skadade data.
• Uppladdningen överskrider en angiven gräns: skapa en kopia inom gränsen och bekräfta sedan att uppladdningen slutfördes och att sidan använder filen.

MDN:s formatguide jämför webbläsarstöd och formatens egenskaper. Om en SVG ser annorlunda ut efter export, se SVG-guiden. Om bilden syns men är oskarp, använd guiden om suddiga bilder.

Exempel: ett produktfoto försvinner på mobilen

I detta illustrativa exempel fungerar ett produktfoto på en bärbar dator efter en butiksflytt, men visas som trasigt på en telefon. Originalet i mediebiblioteket öppnas, så ägaren undersöker telefonens faktiska bildförfrågan.

Telefonen väljer /media/blue-mug-640.webp, som ger 404. Datorn använder /media/blue-mug-1280.webp. Flytten kopierade den större filen men utelämnade den mindre versionen.

Webbansvarig genererar den saknade storleken på nytt, kontrollerar övriga angivna versioner och uppdaterar inaktuella sidreferenser vid behov. Ägaren läser in den offentliga sidan på telefonen igen och bekräftar att den begärda filen ger rätt bild. Orsaken var en saknad genererad fil; att ändra originalets format skulle inte reparera referensen.

8. Verifiera reparationen som besökare

Upprepa det misslyckade testet på samma offentliga sida, skärmstorlek och galleribild. Kontrollera att rätt bild visas och finns kvar efter omladdning. Testa utan administratörsinloggning när bilden ska vara tillgänglig för alla.

Vid en ändring av mall eller leverans, kontrollera en annan sida med samma komponent och granska både dator och mobil. Anteckna kort orsaken och vilken fil eller inställning du ändrade.

Om någon annan ska slutföra reparationen, skicka sidans adress, den valda bildadressen, tidpunkten för felet, webbläsar- och enhetsuppgifter samt relevant felmeddelande. Ange om bilden fungerar i redigeraren, direkt i en ny flik eller vid en annan skärmstorlek. Ta bort privata token och personuppgifter från material som delas offentligt.

Valfritt: tekniska kontroller för webbansvariga

Välj kontroller utifrån ledtrådarna ovan. De hjälper till att skilja en otillgänglig fil från en misslyckad förfrågan och en inläst men dold bild.

Läs bildförfrågan i Network

1. Öppna den berörda offentliga sidan. Välj Fler verktyg → Utvecklarverktyg i Chromes meny och sedan Network. Andra webbläsare har liknande funktioner.
2. Låt inspelningen vara på och läs in sidan igen. Välj filtret Img eller sök på filnamnet. Gå till bilden eller öppna dess galleribild om det normalt startar inläsningen.
3. Välj förfrågan. Anteckna Request URL, status och svarshuvuden under Headers. Använd Preview eller Response för att granska svaret.
4. Om inget matchar, rensa filtren. Adressen kan ha ändrats eller ett skript kan hämta bilden via Fetch/XHR.

Aktivera Disable cache och läs in sidan igen med utvecklarverktygen öppna för att jämföra en ny hämtning. Det kringgår webbläsarens vanliga HTTP-cache, inte CDN-cachen. Om en service worker hanterar webbplatsen, kontrollera dess lagrade svar separat. Se Chromes Network-referens.

En status avgränsar felsökningen men pekar inte ut alla orsaker. MDN förklarar HTTP-statuskoder och normal 304-validering. Vid värdnamns- eller certifikatfel, kontrollera bildvärdens DNS- och HTTPS-inställningar.

Förvänta dig faktiska bilddata och en lämplig Content-Type, till exempel image/jpeg eller image/webp. En adress som slutar på .jpg kan ge HTML, medan en bildtjänst fullt korrekt kan leverera ett annat bildformat från samma filändelse.

Om adressen laddar ned filen när den öppnas

Kontrollera Content-Disposition utöver innehållstypen. Ett svar med Content-Disposition: attachment kan starta en nedladdning när adressen öppnas direkt. Det visar inte i sig att bilden misslyckas på en sida: granska även den inbäddade förfrågan. Om du kopierat en nedladdningslänk, använd värdens stödda adress för bildvisning. Se Content-Disposition-referensen.

Hitta den valda responsiva bildadressen

Högerklicka på bilden i Chrome eller Edge och välj Inspektera. Välj det faktiska <img>-elementet i Elements, inte dess omslutande element eller <picture>. Öppna Console och skriv följande uttryck, som bara läser data:

$0.currentSrc

$0 syftar på det senast valda elementet i dessa utvecklarverktyg. Resultatet är den valda bildadressen, inte en garanti för lyckad inläsning. Kontrollera den i Network. Console Utilities-referensen förklarar $0, och MDN dokumenterar currentSrc.

Webbläsaren kan välja en fil från srcset eller en matchande <picture>-källa. Ett fungerande src reparerar inte en saknad vald kandidat. Picture-reserven beror på källvillkor och stöd; räkna inte med att den hanterar en 404 för den valda filen. Se val av responsiva bilder och picture-referensen.

Red ut bildsökvägar i HTML och CSS

På https://example.com/services/kitchens/, utan en annan basadress angiven av sidan, begär dessa två källor olika platser:

<img src="images/kitchen.jpg" alt="Färdigt kök med ekskåp">
<img src="/images/kitchen.jpg" alt="Färdigt kök med ekskåp">

Den första begär /services/kitchens/images/kitchen.jpg; den andra begär /images/kitchen.jpg på samma värd. Välj adressen som motsvarar din faktiska publicering, inklusive eventuellt undermappsprefix. MDN förklarar relativa och absoluta sökvägar. I en extern CSS-fil utgår en relativ bildadress från stilmallens adress; se CSS-URL-referensen.

Inspektera layout och inläsning

Kontrollera bilden och dess föräldraelement i Elements → Computed: display: none, visibility: hidden, noll opacitet, kollapsade mått, klippning eller överlägg. En bakgrundsbild ger inte en tom behållare fotografiets höjd. Rätta den ansvariga regeln i redigeraren eller den ursprungliga stilmallen; en tillfällig ändring i utvecklarverktygen försvinner normalt vid omladdning. Se Chromes guide till CSS-inspektion och background-image-referensen.

Om den verkliga adressen bara finns i data-src, kontrollera skriptet som tilldelar bildkällan och relevanta Console-fel. Med inbyggt loading="lazy", ange lämpliga mått och se till att bilden har en plats i layouten innan den läses in. Guiden till webbläsarens lazy loading förklarar beteendet.

Content Security Policy: kontrollera om den avsedda bildvärden matchar img-src, eller default-src när ett särskilt bilddirektiv saknas. Se CSP-referensen om bildkällor.

Blandat innehåll: en HTTP-bildreferens på en HTTPS-sida kan uppgraderas eller blockeras beroende på användning. Bekräfta att bilden finns via HTTPS och uppdatera referensen. Se MDN:s vägledning om blandat innehåll.

CORS och inbäddningspolicyer: att visa en vanlig bild från en annan origin och att läsa dess pixlar via canvas har olika krav. Att lägga till crossorigin kan göra att inläsningen misslyckas om bildvärden inte ger nödvändigt CORS-svar. Kontrollera CORS-dokumentationen för bilder och rapporterade begränsningar från Cross-Origin Resource Policy.

Vanliga frågor

Varför ser jag bilden när besökarna inte gör det?

En redigerare kan visa en opublicerad eller tillfällig förhandsvisning, och din inloggade session kan ha åtkomst som besökarna saknar. Testa den offentliga sidan utan den inloggningen. Ska filen vara offentlig, använd webbplatsens offentliga medieuppladdning; annars, be webbansvarig kontrollera den autentiserade visningen.

Varför öppnas bilden i en ny flik men inte på sidan?

Jämför först de exakta adresserna: sidan kan begära en annan storlek. Om de är lika, kontrollera den inbäddade förfrågan efter åtkomstfel eller webbläsarpolicyfel. En lyckad bildförfrågan leder dig sedan vidare till sidans synlighets- och layoutinställningar.

Bevisar ett 200-svar att bilden fungerar?

Nej. Kontrollera vad svaret innehåller. En inloggningssida med status 200 är ingen bild. Om svaret innehåller rätt bild, fortsätt med relevanta Console-meddelanden och dess visning på sidan. Enbart svarskoden bekräftar inte ett synligt resultat.

Reparerar mindre mått eller komprimering en trasig bild?

Det hjälper när en uppladdning överskrider en angiven gräns eller en för stor bild överförs för långsamt. En felaktig sökväg, saknad miniatyrbild eller dold sektion kräver en annan åtgärd. Använd uppladdningsfelet eller bildförfrågan för att fastställa problemet innan du ändrar filen.

Bör jag byta filnamn eller filändelse?

Byt namn för att lösa ett bestämt sökvägs- eller namnproblem och uppdatera sedan referenserna till det gamla namnet. Att döpa om .heic till .jpg konverterar inte bilden. Använd en konverterare om det verkliga formatet inte stöds och behåll originalet.

Får alt-text, robots.txt eller Search Console bilden att visas?

Alt-text beskriver bilden när den inte går att se; texten hämtar inte filen. Robots-instruktioner och Search Console gäller genomsökning och synlighet i sökresultat. Saknas en bild för en besökare på sidan, kontrollera först fil, förfrågan och layout.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)