Memasukkan gambar default seandainya atribut src dari html <img> tidak valid?

268

Apakah ada cara untuk membuat gambar default dalam <img>tag HTML , jika srcatributnya tidak valid (hanya menggunakan HTML)? Jika tidak, apa cara ringan Anda untuk mengatasinya?

html image Galilyou
sumber
3
HTML tidak memiliki cadangan untuk gambar yang rusak. Anda harus menggunakan JavaScript untuk menemukan gambar yang rusak dan mengubah atribut src mereka.
Blixt
2
@Blixt - Bagaimana jika klien Anda adalah MS Outlook atau pembaca EMAIL lainnya dan Anda tidak memiliki Javascript, dan opsi objek tidak berfungsi ... Saya kira satu-satunya solusi adalah alt / teks
Xofo

Jawaban:

319

Anda meminta solusi hanya HTML ...

 <!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>
Luaskan cuplikan

Karena gambar pertama tidak ada, fallback (sprite yang digunakan di situs web ini *) akan ditampilkan. Dan jika Anda menggunakan browser yang sangat lama yang tidak mendukung object, itu akan mengabaikan tag itu dan menggunakan imgtag itu. Lihat situs web caniuse untuk kompatibilitas. Elemen ini didukung secara luas oleh semua browser dari IE6 +.

* Kecuali jika URL untuk gambar berubah (lagi), dalam hal ini Anda mungkin akan melihat teks alt.

Patrick McElhaney
sumber
3
Ini bekerja untuk saya di IE8 setelah saya memasukkan DTD untuk HTML 4.01.
Patrick McElhaney
Ini tidak berfungsi jika gambar yang tidak ada telah X-Frame-Optionsdiatur ke SAMEORIGINatau pengaturan yang lebih permisif.
Attila O.
Ini berfungsi tetapi jika tautan di object.data tidak tepercaya, ia dapat memuat semua jenis barang ...
Michael_Scharf
1
Elemen 'img' tidak dapat disarangkan di dalam elemen 'objek'.
Matheus Miranda
2
@Matheus Tentu bisa. Dalam objek HTML4 dapat berisi konten mengalir (hampir semuanya, termasuk img), dan dalam HTML5 itu transparan, artinya dapat berisi HTML5 yang valid.
Patrick McElhaney
318

Ini bekerja dengan baik untuk saya. Mungkin Anda ingin menggunakan JQuery untuk mengaitkan acara.

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

Diperbarui dengan jacquargs error guard

Diperbarui: solusi CSS saja. Baru-baru ini saya melihat Vitaly Friedman mendemokan solusi CSS hebat yang tidak saya sadari. Idenya adalah untuk menerapkan contentproperti ke gambar yang rusak. Biasanya :afteratau :beforetidak berlaku untuk gambar, tetapi ketika mereka rusak, mereka diterapkan.

<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/

Seperti yang ditunjukkan biola, gambar yang rusak itu sendiri tidak dihapus, tetapi ini mungkin akan memecahkan masalah untuk sebagian besar kasus tanpa JS atau sekumpulan CSS. Jika Anda perlu menerapkan gambar yang berbeda di lokasi yang berbeda, cukup bedakan dengan kelas:.my-special-case img:before { ...

Svend
sumber
3
Menurutku. Ini jawaban yang lebih baik. Inilah quirksmodes mengambil onerror ..... tampaknya cukup aman bagi saya. quirksmode.org/dom/events/error.html#t01
n0nag0n
12
BTW, jika error.jpg tidak ada, ini menyebabkan loop tak terbatas karena terus berusaha menemukan gambar, kemudian onError dipanggil lagi, tidak dapat menemukannya, dan semuanya dimulai lagi.
borq
30
Untuk menghindari risiko loop tak terbatas, tambahkan saja tes: <img src = "foo.jpg" onerror = "if (this.src! = 'Error.jog') this.src = 'error.jpg';">
jacquarg
21
Atau, Anda dapat menulis:onerror="this.src='error.jpg';this.onerror='';"
Denilson Sá Maia
6
Di mana jQuery dalam hal ini?
Praveen Kumar Purushothaman
64

Menemukan solusi ini di Spring in Action 3rd Ed.

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

Pembaruan: Ini bukan solusi hanya HTML ... onerroradalah javascript

ya bakle
sumber
3
Ini sangat bagus. Berikut ini adalah pembaruan dengan gambar mundur pada imgur: <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>
Luaskan cuplikan

Gunakan gambar latar belakang yang memungkinkan Anda menambahkan banyak gambar. Kasus saya: image1 adalah gambar utama, ini akan didapat dari suatu tempat (browser melakukan permintaan) image2 adalah gambar lokal default untuk ditampilkan saat image1 sedang dimuat. Jika image1 mengembalikan segala jenis kesalahan, pengguna tidak akan melihat perubahan apa pun dan ini akan bersih untuk pengalaman pengguna

Emiliano Barboza
sumber
developer.mozilla.org/en/docs/Web/CSS/…
Emiliano Barboza
Ini hanya berfungsi jika image1 benar-benar buram. Jika memiliki transparansi, seperti yang dilakukan sebagian besar ikon gambar, maka image2 akan muncul.
menyentak
14 
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

Pastikan untuk memasukkan dimensi gambar dan apakah Anda ingin gambar untuk ubin atau tidak.

lambacck
sumber
28
Tidak sebagian besar browser menampilkan gambar 'tautan rusak' saat gambar tidak ditemukan ... Jika demikian, pengaturan latar belakang tidak akan menyelesaikan masalah.
Justin D.
13

Saya pikir tidak mungkin menggunakan HTML saja. Namun menggunakan javascript ini harus bisa dilakukan. Dengan penuh semangat kami mengulangi setiap gambar, menguji apakah itu lengkap dan jika itu naturalWidth adalah nol maka itu berarti tidak ditemukan. Ini kodenya:

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;
        }
    }
}

Gunakan seperti ini:

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

Diuji di Chrome dan Firefox

Pim Jager
sumber
2
Ini berfungsi Pim, dan benar-benar dapat digunakan kembali, tapi saya lebih suka opsi ringan untuk kasus ini. Terima kasih banyak :) +1
Galilyou
Anda menyelamatkan seluruh hidup saya Pak.
Beardminator
12

Jika Anda menggunakan Angular / jQuery maka ini mungkin membantu ...

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

Penjelasan

Dengan asumsi bahwa itemmemiliki properti urlyang mungkin nol, ketika itu maka gambar akan ditampilkan sebagai rusak. Itu memicu eksekusi onerrorekspresi atribut, seperti dijelaskan di atas. Anda perlu mengganti srcatribut seperti yang dijelaskan di atas, tetapi Anda perlu jQuery untuk mengakses altSrc Anda. Tidak dapat membuatnya berfungsi dengan JavaScript vanilla.

Mungkin tampak sedikit macet tetapi menyelamatkan hari di proyek saya.

Obie
sumber
11

elemen img sederhana tidak terlalu fleksibel jadi saya menggabungkannya dengan elemen gambar. dengan cara ini tidak diperlukan CSS. ketika kesalahan terjadi, semua srcset diatur ke versi mundur. gambar tautan yang rusak tidak muncul. itu tidak memuat versi gambar yang tidak dibutuhkan. elemen gambar mendukung desain responsif dan beberapa fallback untuk jenis yang tidak didukung oleh browser.

<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
sumber
ini hebat! Waspadai dukungan browser yang hilang caniuse.com/#feat=picture . pertimbangkan untuk menggunakan polyfill atau solusi lain jika Anda perlu mendukung browser lama seperti IE11.
Hinrich
7

angular2: 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
pengguna3601578
sumber
1
Meskipun ini mungkin berhasil, saya tidak berpikir itu menambahkan informasi baru. Bagian onerror hanyalah JavaScript vanilla dan pengikatan src seharusnya sudah diketahui oleh pengguna Angular
Chic
7

Solusi sederhana dan rapi yang melibatkan beberapa jawaban dan komentar yang baik.

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

Bahkan memecahkan risiko loop tak terbatas.

Bekerja untukku.

manish kumar
sumber
IMO, ini jelas tidak terlihat elegan.
Script47
1
@ Script47 Ini rapi, saya ulangi rapi
manish kumar
1
Tidak, aku juga tidak akan bilang itu rapi. Belum lagi bahwa ini mungkin pengulangan solusi lain.
Script47
Bekerja seperti pesona! Terima kasih!
Goehybrid
1
Penyelamat. Saya tidak ingin elegan, saya ingin sederhana dan bekerja. Terima kasih!
Kit
7

Satu-satunya solusi HTML, di mana satu-satunya persyaratan adalah Anda tahu ukuran gambar yang Anda sisipkan. Tidak akan berfungsi untuk gambar transparan, karena digunakan background-imagesebagai pengisi.

Kita dapat berhasil menggunakan background-imageuntuk menautkan gambar yang muncul jika gambar yang diberikan hilang. Maka satu-satunya masalah adalah gambar ikon yang rusak - kita dapat menghapusnya dengan memasukkan karakter kosong yang sangat besar, sehingga mendorong konten di luar tampilan 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
Luaskan cuplikan

Solusi khusus CSS (khusus 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
Luaskan cuplikan

eithed
sumber
4

Tidak ada cara untuk memastikan banyaknya klien (browser) yang akan mencoba melihat halaman Anda. Salah satu aspek yang perlu dipertimbangkan adalah bahwa klien email adalah browser web yang tidak aktif dan mungkin tidak menangani tipuan seperti ini ...

Karena itu Anda juga harus menyertakan alt / teks dengan DEFAULT WIDTH dan HEIGHT, seperti ini. Ini adalah solusi HTML murni.

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

Jadi jawaban bagus lainnya akan sedikit dimodifikasi sebagai berikut:

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

Saya memiliki masalah dengan tag objek di Chrome, tetapi saya akan membayangkan ini juga berlaku untuk itu.

Anda dapat mendesain lebih lanjut alt / teks menjadi SANGAT BESAR ...

Jadi jawaban saya adalah menggunakan Javascript dengan fallback alt / teks yang bagus.

Saya juga menemukan ini menarik: Cara gaya atribut alt gambar

Xofo
sumber
3

Versi modulable dengan JQuery , tambahkan ini di akhir file Anda:

<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>

dan pada imgtag Anda :

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

Solusi di atas tidak lengkap , itu melewatkan atribut src.

this.srcdan this.attribute('src')TIDAK sama, yang pertama berisi referensi lengkap ke gambar, misalnya http://my.host/error.jpg, tetapi atribut hanya menyimpan nilai aslinya,error.jpg

Solusi yang benar

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
Seb
sumber
3
Saat menggunakan kode ini, saya melihat Uncaught TypeError: this.attribute is not a functiondi Chrome 43.
John Washam
Apakah Anda menggunakan jQuery?
mix3d
onError tidak berlaku lagi menurut developer.mozilla.org/en-US/docs/Web/HTML/Element/img
comiventor
2

Jika Anda menggunakan Angular 1.x Anda dapat memasukkan arahan yang memungkinkan Anda untuk mundur ke sejumlah gambar. Atribut fallback mendukung satu url, beberapa url di dalam array, atau ekspresi sudut menggunakan data lingkup:

<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" />

Tambahkan arahan fallback baru ke modul aplikasi sudut Anda:

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
sumber
Ide keren! Array dari gambar fallback adalah implementasi yang baik
Z. Khullah
1

Saya baru-baru ini harus membangun sistem mundur yang mencakup sejumlah gambar mundur. Inilah cara saya melakukannya menggunakan fungsi JavaScript sederhana.

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;
}

Saya merasa ini cara yang cukup ringan untuk menangani banyak gambar mundur.

Rager
sumber
onError tidak berlaku lagi menurut developer.mozilla.org/en-US/docs/Web/HTML/Element/img
comiventor
0

Menggunakan Jquery Anda bisa melakukan sesuatu seperti ini:

$(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
sumber
0

Untuk gambar apa pun, cukup gunakan kode javascript ini:

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

mana ptImageadalah <img>alamat tag diperoleh document.getElementById().

José Esteves Pereira
sumber
0

Google membuang halaman ini ke kata kunci "image fallback html", tetapi karena tidak ada yang membantu saya, dan saya sedang mencari "dukungan fallback svg untuk IE di bawah 9", saya terus mencari dan inilah yang saya temukan: 

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

Mungkin di luar topik, tetapi ini menyelesaikan masalah saya sendiri dan mungkin membantu orang lain juga.

Sándor Zuboly
sumber
0

Selain jawaban Patrick yang brilian, bagi Anda yang mencari solusi angular cross-platform js, inilah jawabannya:

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

Inilah bungkusan tempat saya bermain berusaha menemukan solusi yang tepat: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

berjemur
sumber
0

Jika Anda telah membuat proyek Web dinamis dan telah menempatkan gambar yang diperlukan di WebContent maka Anda dapat mengakses gambar dengan menggunakan kode yang disebutkan di bawah ini di Spring MVC:

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

Anda juga dapat membuat folder bernama img dan menempatkan gambar di dalam folder img dan menempatkan folder img di dalam WebContent maka Anda dapat mengakses gambar dengan menggunakan kode yang disebutkan di bawah ini:

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

Baik!! Saya menemukan cara ini nyaman, periksa untuk atribut ketinggian gambar menjadi 0, maka Anda dapat menimpa atribut src dengan gambar default: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/ Gambar

 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
sumber