Proč nefungují obrázky

když jsou na webu místo obrázků červené křížky

Nesouhlasí adresa obrázku - Obrázky nejsou na serveru nakopírované - Velká a malá písmena - Zpětná lomítka - Odkaz vede na disk - Obrázek je příliš veliký - Špatně uložený jpg - Server je nedostupný - SRC, nikoli SCR - Nefunguje obrázkové pozadí

Když obrázky nejsou vidět na stránkách na serveru, tak to může mít víc příčin. Tento text řeší, čím to je, když se místo obrázku vykreslí prázdná plocha s červeným křížkem. Nějak takhle to vypadá třeba v Internet Exploreru:

Obrázek rozbitého obrázku v Exploreru

Předpokládám, že když se díváte na stránky na disku z lokálního počítače, tak že obrázky vidíte. Pokud ne, tak si to opravte na disku.

Nesouhlasí adresa obrázku

Když prohlížeč místo obrázku vykreslí červený křížek, znamená to, že na zadané adrese obrázek nenašel.

Adresu obrázku zjistíte tak, že kliknete pravým tlačítkem na ten červený křížek a zvolíte Vlastnosti. Objeví se dialog Vlastnosti obrázku (i když samotný obrázek nefunguje). V dialogu je vidět zdroj pod položkou (v Exploreru) "Adresa (URL)". Pečlivě si uvedenou adresu prostudujte, možná hned uvidíte chybu.

Zkopírujte si adresu a zadejte ji jako adresu do prohlížeče. Pokud je obrázek na serveru, měl by se na této adrese objevit. Jestliže se obrázek neobjeví (může se také objevit chybové hlášení), je buďto adresa špatně zapsaná v html zdroji stránky, nebo obrázek na serveru chybí.

Obrázky nejsou na serveru nakopírované

Zkontrolujte, zda jste obrázky na server skutečně nakopírovali.

Kopírování obrázků může vadit třeba překročená datová kvóta.

Je obrázek ve správném adresáři (složce)?

Občas se při posílání souborů na server stane, že některé obrázky skončí v jiných adresářích, než kam patří.

Má obrázek správně nastavená práva?

Když si příliš hrajete s právy pro čtení, může se stát, že obrázek sami vidíte (jako vlastník), ale nikdo jiný jej nevidí, protože nemá práva pro čtení.

Pokud nevíte, jak zjistit nebo nastavit práva obrázku, tento problém se vás pravděpodobně týkat nebude (je to pro zkušenější uživatele, kteří práva sami mění). Ale kdyby něco tak práva se třeba dají nastavovat přes FTP třeba pomocí Total Commanderu.

Velká a malá písmena

Toto je asi nejčastější příčina problému. Při prohlížení z disku je stránka vidět s obrázky, ale když se zkopíruje na server, obrázky zmizí, protože jsou nesprávně pojmenované nebo odkazované.

Ve jménech souborů záleží na velikosti písmen. Pokud odkaz na obrázek (v parametru src) zapisujete například s velkými počátečními písmeny, ale ve skutečnosti má všechna písmena malá, server soubor nenajde.

Řešením je opravit zápis adres a odkazů tak, aby velikostí písmen přesně odpovídal. Dodržuji užitečnou konvenci: Zadávám všechna jména souborů, které mají přijít na web, vždy s malými písmeny, bez mezer a bez diakritiky.

Možná vás zajímá, kde je problém. Zde je "problém" v návrhu Windowsech. Specifikace z normálních operačních systémů říkají, že ve jménech souborů a v URL je třeba rozlišovat malá a velká písmena. Windows je nerozlišuje, a umožní vám tak zapsat chybný odkaz. Když to pak zkopírujete na server, kde běží nějaký skutečný operační systém (nejčastěji Linux), tak soubory nejsou k nalezení.

Zkontrolujte i příponu

Začátečníci, kteří mají ve Windowsech skryté přípony známých souborů (dost nešikovné nastavení) se mohou setkat s problémem v tom, že přípona souboru se jmenuje ve skutečnosti .JPG -- některé editory příponu ukládají s velkými (upozornil Marek Janů).

Také dejte pozor na to, abyste nezaměnili příponu .jpg a .jpeg. Je to ten samý typ souboru, ale když se adresa src bude lišit od jména souboru, server to nenajde.

Zpětná lomítka v adresách

To je totéž, co výše zmíněná malá a velká písmena. Pokud v adresách souborů oddělujete adresáře zpětnými lomítky místo normálních, nebude to na webu v fungovat (kromě Internet Exploreru, ten si to myslím přeloží). Zpětná lomítka nahraďte normálními.

Odkaz vede na disk

Obrázky, jejichž src začínají zápisem C:/ nebo file:/// a podobnými, ve skutečnosti vedou na disk autora. Nikdo jiný je nevidí. Řešením je oprava atributu src tak, aby ukazoval na obrázek umístěný na serveru -- pak jej uvidí všichni.

Jde o chybu obzvlášť záludnou, protože autor stránek žije v domnění, že je všechno v pořádku. Obrázky totiž na svých stránkách prohlížených ze svého počítače vidí.

Podobné chyby vznikají, když se používají odkazy na intrAnet.

Prevence: už při prvním návrhu stránek používejte buďto relativní odkazy, nebo absolutní odkazy mířící přímo na web.

Obrázek je příliš veliký

Normální webové obrázky mají velikost několik kilobajtů, výjimečně kolem 100 kilobajtů. Jestliže do svých stránek vložíte obrázky, které mají několik mega, tak se to nebude stíhat stahovat a bude to vypadat, že obrázky nefungují, i když je jejich adresa správně.

Zmenšete obrázek pod 100 kB.

Špatně uložený jpg

Některé programy (prý např. Corel, IrfanView) ukládají jpg obrázky tak, že je Internet Explorer nemusí přečíst. Mozilla to zvládne. Kalda o tom píše:

Corel umí ukládat JPEG v různých paletách i bitových hloubkách, zatímco Internet Explorer umí přečíst pouze RGB v 24bit nebo 256 grayscale. Problém s ukládáním v Corelu jsem zažil a nejčastěji se jednalo o problém, kdy byl obrázek nastaven v 32bitech nebo CMYK.

Zkuste stránku zkontrolovat prohlížečem Mozilla nebo jiným. Pokud obrázek v jednom prohlížeči je a ve druhém není, zkuste jej přeuložit v jiném programu.

Server je nedostupný

Pokud načítáte obrázky z jiného serveru, než na jaké visí stránka, může být problém v drátech vedoucích k tomu druhému serveru. Zkuste refresh a neztrácejte hlavu.

SRC, nikoli SCR

Častá chyba. Když píšete do HTML zápis pro obrázek, tedy tag <img>, dávejte pozor na to, že atribut src se píše src, nikoli scr. Takto je to správně:

<img src="adresa.jpg" ...>

toto je špatně:

<img scr="adresa.jpg" ...>

Src je asi zkratka z anglického SouRCe, tedy zdroj.

Nefunguje obrázkové pozadí

Příčiny jsou stejné, jako když nefunguje obrázek. Chcete-li vyzkoumat chybu, zapište si do stránky testovací obrázek a zadejte mu stejné src jako je URL, z jaké načítáte nefungující pozadí. A samozřejmě je potřeba zkontrolovat zápis vlastnosti background-image, hlavně písmenka v tom slově background, uvozovky a závorky.

Pokud používáte externí CSS a relativní adresy URL, počítejte s tím, že relativní adresa se počítá od umístění CSS souboru, nikoli od umístění stránky.

Možná jsem na nějaký možný důvod nefunkčnosti obrázků zapomněl. Napište mi, prosím.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní
Encyklopedie FrontPage Reklama PHP FAQ

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.