Jaki jest prawidłowy sposób dołączenia obrazu bez src?

Mam obraz, który później dynamicznie zapełniam src javascript, ale dla ułatwienia chcę, aby tag obrazu istniał przy ładowaniu strony, ale po prostu niczego nie wyświetlał. Wiem, że <img src='' />jest nieprawidłowa, więc jaki jest najlepszy sposób na to?

Choć nie ma poprawny sposób pominąć źródło fotografowanego obrazu, tam są źródła, które nie spowoduje hitów serwerów. Niedawno miałem podobny problem ze iframes i zdecydowałem, //:0że to najlepsza opcja. Nie naprawdę!

Rozpoczęcie od //(pominięcie protokołu) powoduje użycie protokołu bieżącej strony, co zapobiega ostrzeżeniom o „niebezpiecznej zawartości” na stronach HTTPS. Pominięcie nazwy hosta nie jest konieczne, ale jest krótsze. Wreszcie port :0gwarantuje, że żądanie serwera nie może zostać wykonane (zgodnie ze specyfikacją nie jest poprawnym portem).

To jedyny adres URL, który znalazłem, nie spowodował żadnych trafień na serwer ani komunikatów o błędach w żadnej przeglądarce. Zwykły wybór - javascript:void(0)- spowoduje wyświetlenie ostrzeżenia o „niezabezpieczonej zawartości” w IE7, jeśli zostanie użyte na stronie obsługiwanej przez HTTPS. Każdy inny port spowodował próbę połączenia z serwerem, nawet w przypadku nieprawidłowych adresów. (Niektóre przeglądarki po prostu wysyłają nieprawidłowe żądania i czekają, aż upłynie limit czasu).

Zostało to przetestowane w Chrome, Safari 5, FF 3.6 i IE 6/7/8, ale spodziewam się, że będzie działać w dowolnej przeglądarce, ponieważ powinna to być warstwa sieciowa, która zabija każdą próbę żądania.

Inną opcją jest osadzenie pustego obrazu. Zrobi to każdy obraz, który odpowiada Twojemu celowi, ale poniższy przykład koduje GIF, który ma tylko 26 bajtów - z http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

Edytuj na podstawie komentarza poniżej:

Oczywiście należy wziąć pod uwagę wymagania dotyczące obsługi przeglądarki. Nie ma wsparcia dla IE7 lub mniejszej. http://caniuse.com/datauri

W dzisiejszych czasach IMHO najlepszy krótki, rozsądny i ważny sposób na pusty img src jest taki:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

Drugi przykład wyświetla „Tekst alternatywny” (oraz ikonę zepsutego obrazu w Chrome i IE).

"data:,"jest prawidłowym identyfikatorem URI. Domyślny typ pustego nośnika to text/plain. Oznacza to pusty plik tekstowy i jest równoważny z"data:text/plain,"

Polecam dynamiczne dodawanie elementów, a jeśli używasz jQuery lub innej biblioteki JavaScript, jest to dość proste:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

również spójrz na prependi append. W przeciwnym razie, jeśli masz taki znacznik obrazu i chcesz go zweryfikować, możesz rozważyć użycie fikcyjnego obrazu, takiego jak przezroczysty gif 1 px lub png.

Nie robiłem tego od dłuższego czasu, ale raz musiałem przejść przez to samo.

<img src="about:blank" alt="" />

Jest moim ulubionym - ten //:0sugeruje, że spróbujesz nawiązać połączenie HTTP / HTTPS z serwerem źródłowym na porcie zero (port tcpmux?) - co jest prawdopodobnie nieszkodliwe, ale wolałbym tak nie robić. Heck, przeglądarka może zobaczyć port zero i nawet nie wysłać żądania. Ale nadal wolałbym, aby nie było tak określone, gdy prawdopodobnie nie to masz na myśli.

W każdym razie renderowanie about:blankjest bardzo szybkie we wszystkich testowanych przeglądarkach. Właśnie wrzuciłem go do walidatora W3C i nie narzekał, więc może nawet być ważny.

Edycja : Nie rób tego; nie działa we wszystkich przeglądarkach (pokaże ikonę „uszkodzony obraz”, jak wskazano w komentarzach do tej odpowiedzi). Skorzystaj z <img src='data:...poniższego rozwiązania. Lub jeśli nie zależy ci na ważności, ale nadal chcesz unikać zbędnych żądań do serwera, możesz to zrobić <img alt="" />bez atrybutu src. Ale to NIEPRAWIDŁOWY HTML, więc wybieraj to ostrożnie.

Strona testowa pokazująca całą masę różnych metod: http://desk.nu/blank_image.php - obsługiwana z różnego rodzaju różnymi typami dokumentów i typami treści. - jak wspomniano w komentarzach poniżej, skorzystaj z nowej strony testowej Marka Ormstona pod adresem : http://memso.com/Test/BlankImage.html

Jak napisano w komentarzach, ta metoda jest zła.

Nie znalazłem tej odpowiedzi wcześniej, ale zgodnie ze specyfikacją W3 prawidłowy pusty srctag byłby linkiem zakotwiczonym #.

Przykład: src="#",src="#empty"

Strona pomyślnie się sprawdza i nie są wysyłane żadne dodatkowe żądania.

Odkryłem, że po prostu ustawienie src na pusty ciąg i dodanie reguły do ​​CSS, aby ukryć ikonę uszkodzonego obrazu, działa dobrze.

[src=''] {
    visibility: hidden;
}

jeśli utrzymasz pusty atrybut src, przeglądarka wyśle ​​żądanie do bieżącego adresu URL strony zawsze dodawaj 1 * 1 przezroczysty obraz w atrybucie src, jeśli nie chcesz żadnego adresu URL

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Znalazłem to używając:

<img src="file://null">

nie złoży żądania i nie potwierdzi poprawnie.

Przeglądarki po prostu zablokują dostęp do lokalnego systemu plików.

Ale na przykład w dzienniku konsoli Chrome może pojawić się błąd:

Not allowed to load local resource: file://null/

Użyj naprawdę pustego, ważnego i wysoce zgodnego pliku SVG na podstawie tego artykułu :

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

Będzie miał domyślny rozmiar do 300 x 150 pikseli, jak każdy inny plik SVG, ale możesz pracować z tym w imgdomyślnych stylach elementu, tak jak byś potrzebował w każdym przypadku w praktycznej implementacji.

Opierając się na odpowiedzi Bena Blota, jedynym sposobem, w jaki udało mi się to sprawdzić w walidatorze w3, było:

<img src="/./.:0" alt="">`

Ja osobiście używam about:blank srcikony zepsutego obrazu i zajmuję się tym, ustawiając krycie imgelementu na 0.

<img src="invis.gif" />

Gdzie invis.gif jest jednopikselowym przezroczystym gifem. Nie złamie się to w przyszłych wersjach przeglądarek i działa w starszych przeglądarkach od lat 90.

png też powinien działać, ale w moich testach gif miał 43 bajty, a png 167 bajtów, więc gif wygrał.

ps nie zapomnij o znaczniku alt, podobnie jak walidatory.

Po prostu:

<img id="give_me_src"/>