Czy można wyświetlić alternatywny obraz, jeśli oryginalny plik źródłowy nie został znaleziony? Chciałbym osiągnąć to tylko z css i html, bez javascript (lub jQuery i podobne). Chodzi o to, aby nadal wyświetlać obraz zamiast testu "alt" lub domyślnego (brzydkiego) krzyża IE. Jeśli nie jest to możliwe bez javascript, to raczej sprawdzę img src z php z podstawowym if-then-else.Wyświetl alternatywny obraz
Można to zrobić za pomocą własności CSS background-image elementu img, tj
img
{
background-image:url('default.png');
}
Jednak trzeba dać szerokości lub wysokości dla tej pracy (gdy img-src nie jest znaleziono):
img
{
background-image:url('default.png');
width:400px;
}
<object data="foobar.png" width=200 height=200>
<img src="test.png" alt="Just testing.">
</object>
Tutaj foobar.png jest głównym obraz, test.png jest obraz zastępczy. Poprzez semantykę elementu object zawartość elementu (tutaj: element img) powinna być renderowana wtedy i tylko wtedy, gdy nie można użyć danych podstawowych (określonych za pomocą atrybutu data).
Chociaż przeglądarki miały straszne błędy w implementacjach object w ubiegłym roku, ta prosta technika wydaje się działać na nowoczesnych wersjach IE, Firefox, Chrome.
Przypadek testowy: http://jsfiddle.net/VkrJ4/1/ OK w * W7Pro x64 * z Fx 12.0, IE9, Saf 5.1.5 i Op 11.64. Nie testowano w Chrome/Chromium. Na razie nie przetestowane z czytnikami ekranu i innymi terminalami AT (pytanie: czy NVDA, JAWS, VoiceOver, ORCA itd. Czytają tekst "@alt" swoim użytkownikom?) – FelipeAls
Bardzo proste i najlepszym sposobem osiągnięcia tego celu z niewielkim kodu
<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg">
Dla mnie powyżej działa idealnie!
Bardzo przydatny fragment, który rozwiązuje problem elegancko. Jednak OP wyraźnie poprosił * ", aby osiągnąć to tylko z css i html, bez javascript" * – domsson
Czy też nie powinno to być 'onerror =" this.src = 'img/undefined.jpg'; "'? Plus, zobacz to pytanie, aby uzyskać możliwą nieskończoną pętlę i jak temu zapobiec: http://stackoverflow.com/questions/8124866/how-does-one-use-the-onerror-attribute-of-an-img-element – domsson
Czy to zadziałało, gdy je testowałeś? W moim Firefoksie tło nie jest wyświetlane, gdy brakuje prawdziwego obrazu. W moim IE wyświetlane jest tło, ale tak samo jak tekst altowy lub czerwone "×" w polu. –
Już wybrałem Aswer, ale mam jeszcze pytanie: co masz na myśli mówiąc "musisz podać szerokość lub wysokość do pracy (gdy img-src nie zostanie znaleziony)"? Czy mój znacznik img ma już szerokość i wysokość, które będą używane również przez obraz tła? – rodedo
Tak, myślę, że to powinno zadziałać. – emrea