Bir html <img> öğesinin src özniteliğinin geçerli olmaması durumunda varsayılan bir görüntü giriliyor mu?

268

Özniteliğin geçersiz <img>olması durumunda src(yalnızca HTML kullanılarak) bir HTML etiketinde varsayılan görüntü oluşturmanın herhangi bir yolu var mı ? Değilse, etrafta çalışmanın hafif yolu ne olurdu?

html  image 
— Galilyou
kaynak
3
HTML'de bozuk görüntüler için yedek yoktur. Bozuk görüntüleri bulmak ve src özelliklerini değiştirmek için JavaScript kullanmanız gerekir.
— Blixt
2
@Blixt - İstemciniz MS Outlook veya başka bir EMAIL okuyucuysa ve Javascript'iniz yoksa ve nesne seçeneği çalışmıyorsa ... Tek çözüm alt / text
— Xofo

Yanıtlar:

319

Yalnızca HTML çözümü istediniz ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>
Snippet'i genişlet

İlk görüntü mevcut olmadığından, geri dönüş (bu web sitesinde kullanılan spritelar *) görüntülenecektir. Ve desteklemeyen gerçekten eski bir tarayıcı kullanıyorsanız object, bu etiketi yok sayar ve etiketi kullanır img. Uyumluluk için caniuse web sitesine bakın . Bu öğe IE6 + 'dan tüm tarayıcılar tarafından yaygın olarak desteklenmektedir.

* Resmin URL'si değişmedikçe (tekrar), bu durumda muhtemelen alternatif metni görürsünüz.

— Patrick McElhaney
kaynak
3
HTML 4.01 için DTD'yi yerleştirdikten sonra IE8'de benim için çalıştı.
— Patrick McElhaney
Mevcut olmayan görüntü X-Frame-Optionsayarlanmış SAMEORIGINveya daha izin verilen bir ayara sahipse bu çalışmaz .
— Attila O.
Çalışır, ancak object.data'daki bağlantıya güvenilmezse, her türlü şeyi yükleyebilir ...
— Michael_Scharf
1
'İmg' öğesi, 'nesne' öğesinin içine yerleştirilemez.
— Matheus Miranda
2
@Matheus Emin olabilir. HTML4 nesnesinde akış içeriği (img dahil hemen hemen her şey) içerebilir ve HTML5'te saydamdır, yani geçerli herhangi bir HTML5 içerebilir.
— Patrick McElhaney
318

Bu benim için iyi çalışıyor. Belki olayı kancalamak için JQuery kullanmak istersiniz.

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

Jakar hata koruma ile güncellendi

Güncelleme: Vitaly Friedman demosunu yakın zamanda gördüğüm tek CSS çözümü farkında olmadığım harika bir CSS çözümü. Fikir contentözelliği kırılan görüntüye uygulamaktır. Normalde :afterveya :beforegörüntülere uygulanmaz, ancak kırıldıklarında uygulanırlar.

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

Demo: https://jsfiddle.net/uz2gmh2k/2/

Kemanın gösterdiği gibi, kırık görüntünün kendisi kaldırılmaz, ancak bu çoğu durumda herhangi bir JS veya CSS gobs olmadan sorunu çözecektir. Farklı konumlara farklı resimler uygulamanız gerekiyorsa, bir sınıfla farklılaşmanız yeterlidir:.my-special-case img:before { ...

— Svend
kaynak
3
Bence. Bu daha iyi cevap. İşte quirksmodes onerror ..... benim için oldukça güvenli görünüyor. quirksmode.org/dom/events/error.html#t01
— n0nag0n
12
BTW, error.jpg yoksa, görüntüyü bulmaya çalıştığı için sonsuz bir döngüye neden olur, onError tekrar çağrılır, bulamaz ve her şey yeniden başlar.
— borq
30
Sonsuz döngü riskinden kaçınmak için bir test eklemeniz yeterlidir: <img src = "foo.jpg" onerror = "if (this.src! = 'Error.jog') this.src = 'error.jpg';">
— jacquarg
21
Alternatif olarak, şunları yazabilirsiniz:onerror="this.src='error.jpg';this.onerror='';"
— Denilson Sá Maia
6
Bu jQuery nerede?
— Praveen Kumar Purushothaman
64

Bu çözümü Spring in Action 3'te buldu.

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

Güncelleme: Bu sadece HTML çözümü değil ... onerrorjavascript

— fırında pişirmek
kaynak
3
Harika çalışıyor. İmgur'da yedek resim içeren bir güncelleme: <img src = "a-missing-image.jpg" alt = "" onerror = "this.src = 'http: ///i.imgur.com/hfM1J8s.png' ">
— arpo
15 

<img style="background-image: url(image1), url(image2);"></img>
Snippet'i genişlet

Birden çok resim eklemenize izin veren arka plan resmi kullanın. Benim durumum: image1 ana görüntüdür, bu bir yerden (tarayıcı bir istekte bulunur) elde edilir image2, image1 yüklenirken gösterilecek varsayılan bir yerel görüntüdür. İmage1 herhangi bir hata döndürürse, kullanıcı herhangi bir değişiklik görmez ve bu kullanıcı deneyimi için temiz olur

— Emiliano Barboza
kaynak
— Emiliano Barboza
Bu yalnızca image1 tamamen opaksa çalışır. Çoğu simge görüntüsünde olduğu gibi saydamlığı varsa, image2 içinden görünecektir.
— jdunning
14 
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

Görüntünün boyutlarını ve görüntünün döşemesini isteyip istemediğinizi girdiğinizden emin olun.

— lambacck
kaynak
28
Görüntü bulunamadığında çoğu tarayıcıda 'bozuk bağlantı' resmi gösterilmez ... Bu durumda, arka planın ayarlanması sorunu çözmez.
— Justin D.
13

Sadece HTML kullanarak mümkün olduğunu düşünmüyorum. Ancak javascript kullanarak bu yapılabilir olmalıdır. Temelde her görüntünün üzerine dönüyoruz, tam olup olmadığını test ediyoruz ve doğalWidth sıfırsa, bu olmadığı anlamına gelir. İşte kod:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

Şöyle kullanın:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

Chrome ve Firefox'ta test edildi

— Pim Jager
kaynak
2
Pim çalışıyor ve tamamen yeniden kullanılabilir, ancak bu durum için hafif seçeneği tercih ederim. Çok teşekkürler :) +1
— Galilyou
Tüm hayatımı kurtardın efendim.
— Sakal Makinesi
12

Angular / jQuery kullanıyorsanız, bu yardımcı olabilir ...

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

açıklama

Boş olabilen itembir özelliğe sahip urlolduğunu varsayarsak , o zaman görüntü bozuk olarak görünür. Bu onerror, yukarıda açıklandığı gibi nitelik ifadesinin yürütülmesini tetikler . srcÖzniteliği yukarıda açıklandığı gibi geçersiz kılmanız gerekir, ancak altSrc'nize erişmek için jQuery gerekir. Vanilya JavaScript ile çalışmak için alınamadı.

Biraz acayip görünebilir ama günü projeme kurtardı.

— Obie
kaynak
11

basit bir img öğesi çok esnek değil, bu yüzden bir resim öğesi ile birleştirdim. bu şekilde CSS gerekmez. bir hata oluştuğunda, tüm srcset'ler yedek sürüme ayarlanır. bozuk bir bağlantı resmi görünmüyor. gereksiz görüntü sürümlerini yüklemez. resim öğesi, duyarlı tasarımı ve tarayıcı tarafından desteklenmeyen türler için birden fazla yedeklemeyi destekler.

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
— bapho
kaynak
bu harika! eksik tarayıcı desteğinin farkında olun caniuse.com/#feat=picture . IE11 gibi eski tarayıcıları desteklemeniz gerekiyorsa bir çoklu dolgu veya başka bir çözüm kullanmayı düşünün.
— Hinrich
7

angular2: 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
— user3601578
kaynak
1
Bu işe yarayabilir olsa da, yeni bir bilgi eklediğini sanmıyorum. Onerror kısmı sadece vanilya JavaScript ve src bağlama zaten açısal kullanıcılar tarafından bilinmelidir
— Chic
7

Bazı iyi cevapları ve yorumları içeren basit ve düzgün bir çözüm.

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

Sonsuz döngü riskini bile çözer.

Benim için çalıştı.

— manish kumar
kaynak
IMO, bu kesinlikle zarif görünmüyor.
— Script47
1
@ Script47 Temiz, düzenli tekrar
— manish kumar
1
Hayır, temiz olduğunu da söyleyemem. Bunun muhtemelen diğer çözümlerin bir rehash olduğunu belirtmiyorum.
— Script47
Tıkır tıkır çalışıyor! Teşekkür ederim!
— Goehybrid
1
Cankurtaran. Zarif olmak istemedim, basit ve çalışmak istedim. Teşekkürler!
— Kit
7

Tek HTML eklentisi, burada tek gereksinim eklediğiniz görüntünün boyutunu bilmenizdir . background-imageDolgu olarak kullandığı için saydam görüntüler için çalışmaz .

background-imageVerilen görüntü eksikse görünen görüntüyü bağlamak için başarıyla kullanabiliriz . Sonra tek sorun kırık simge görüntüsü - çok büyük bir boş karakter ekleyerek kaldırabiliriz, böylece içeriği ekranın dışına itebiliriz img.

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}
This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder
Snippet'i genişlet

Yalnızca CSS çözümü (yalnızca Webkit)

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
}
This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder
Snippet'i genişlet

— eithed
kaynak
4

Sayfanızı görüntülemeye çalışacak sayısız istemci (tarayıcı) olduğundan emin olmanın bir yolu yoktur. Dikkate alınması gereken bir yönü, e-posta istemcilerinin web tarayıcıları defacto olması ve bu tür trickamajickery işlemeyebilir olmasıdır ...

Bu nedenle AYRICA, VARSAYILAN GENİŞLİĞİ ve YÜKSEKLİĞİ olan bir alt / metin eklemeniz gerekir. Bu saf bir HTML çözümüdür.

alt="NO IMAGE" width="800" height="350"

Yani diğer iyi cevap aşağıdaki gibi biraz değiştirilecektir:

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

Chrome'da nesne etiketi ile ilgili sorunlar yaşadım, ancak bunun da geçerli olacağını düşünürdüm.

Ayrıca alt / metin ÇOK BÜYÜK olacak şekilde stil ...

Benim cevabım güzel bir alt / text yedek ile Javascript kullanmak.

Bunu da ilginç buldum: Bir görüntünün alt niteliği nasıl şekillendirilir

— Xofo
kaynak
3

JQuery ile değiştirilebilir bir sürüm , bunu dosyanızın sonuna ekleyin:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

ve imgetiketinizde:

<img src="..." data-src-error="..." />
— Kevin Robatel
kaynak
3

Yukarıdaki çözüm eksik , niteliğini kaçırdı src.

this.srcve this.attribute('src')aynı DEĞİLDİR, ilki görüntüye tam referansı içerir http://my.host/error.jpg, ancak özellik yalnızca orijinal değeri tutar,error.jpg

Doğru çözüm

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
— Seb
kaynak
3
Bu kodu kullanırken Uncaught TypeError: this.attribute is not a functionChrome 43'te görüyorum .
— John Washam
JQuery kullanıyor musunuz?
— mix3d
onError geliştiriciye göre kullanımdan kaldırılmıştır.
— mozilla.org/tr-TR/docs/Web/HTML/Element/img
2

Açısal 1.x kullanıyorsanız, istediğiniz sayıda görüntüye geri dönmenizi sağlayacak bir yönerge ekleyebilirsiniz. Yedek özellik, tek bir URL'yi, bir dizinin içindeki birden çok URL'yi veya kapsam verilerini kullanarak açısal bir ifadeyi destekler:

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

Açısal uygulama modülünüze yeni bir yedek yönerge ekleyin:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])
— Rob Evans
kaynak
İyi fikir! Yedek resimlerden oluşan bir dizi iyi bir uygulamadır
— Z. Khullah
1

Son zamanlarda herhangi bir sayıda yedek görüntü içeren bir geri dönüş sistemi oluşturmak zorunda kaldım. Basit bir JavaScript işlevi kullanarak bunu nasıl yaptım.

HTML

<img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-fallIndex="1"
    data-fallback1="some_image.png"
    data-fallback2="some_image.jpg">

JavaScript

function fallBackImg(elem){
    elem.onerror = null;
    let index = +elem.dataset.fallIndex;
    elem.src = elem.dataset[`fallback${index}`];
    index++;
    elem.dataset.fallbackindex = index;
}

Birçok yedek görüntüyü ele almanın oldukça hafif bir yolu gibi hissediyorum.

— Rager
kaynak
onError göre kullanım dışı kalmıştır developer.mozilla.org/en-US/docs/Web/HTML/Element/img
— comiventor
0

Jquery kullanarak böyle bir şey yapabilirsiniz:

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});
— Jon
kaynak
0

Herhangi bir görüntü için bu javascript kodunu kullanın:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

nerede ptImagebir olan <img>etiket adresi ile elde document.getElementById().

— José Esteves Pereira
kaynak
0

Google, "image fallback html" anahtar kelimelerine bu sayfayı attı, ancak yukarıdakilerin hiçbiri bana yardımcı olmadığından ve "9 için aşağıda IE için svg yedek desteği" arıyordum, aramaya devam ettim ve bulduğum şey bu: 

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

Konu dışı olabilir, ancak kendi sorunumu çözdü ve başka birine de yardımcı olabilir.

— Sándor Zuboly
kaynak
0

Patrick'in parlak cevabına ek olarak , platformlar arası açısal js çözümü arayanlarınız için, işte gidiyorsunuz:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

İşte doğru çözümü bulmaya çalışırken oynadığım bir ipucu: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

— SunSay
kaynak
0

Dinamik Web projesi oluşturduysanız ve gerekli görüntüyü WebContent'e yerleştirdiyseniz, Spring MVC'de aşağıda belirtilen kodu kullanarak görüntüye erişebilirsiniz:

<img src="Refresh.png" alt="Refresh" height="50" width="50">

Ayrıca img adlı klasör oluşturabilir ve görüntüyü img klasörünün içine yerleştirebilir ve bu img klasörünü WebContent içine yerleştirebilirsiniz, daha sonra aşağıdaki kodu kullanarak görüntüye erişebilirsiniz:

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">
— Yoshita Mahajan
kaynak
-2

İyi!! Bu şekilde uygun buldum, görüntünün height özelliğinin 0 olup olmadığını kontrol edin, sonra src özelliğinin üzerine varsayılan görüntü ile yazabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/ görüntü

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }
— suhail
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.