web-dev-qa-db-ja.com

HTML <img>のsrc属性が無効な場合のデフォルト画像の入力

src属性が無効な場合にHTMLの<img>タグにデフォルトの画像をレンダリングする方法はありますか（HTMLのみを使用）。そうでなければ、それを回避するためのあなたの軽量な方法は何でしょうか？

htmlimage
237
Galilyou

あなたは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://appharbor.com/assets/images/stackoverflow-logo.png" alt="example">
    </object>
  </p>

</body>

</html>

最初の画像が存在しないため、フォールバック（Stack Overflowロゴ）が表示されます。そして、本当に古いブラウザで object をサポートしていないブラウザを使っているのであれば、そのタグを無視して使うだけです。 imgタグ互換性については caniuse のWebサイトを参照してください。 2018年現在、この要素はie6 +以降のすべてのブラウザで幅広くサポートされています。

280
Patrick McElhaney

これは私にはうまくいきます。イベントをフックするためにJQueryを使いたいのかもしれません。

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

Jacquargsエラーガードで更新

更新：CSSのみの解決方法私が最近見た Vitaly Friedman デモ私が知らなかった素晴らしいCSSの解決方法。考えは壊れたイメージにcontentプロパティを適用することです。通常:afterや:beforeは画像には適用されませんが、壊れている場合は適用されます。

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

デモ： https://jsfiddle.net/uz2gmh2k/2/

フィドルが示すように、壊れたイメージ自体は削除されませんが、これはおそらくJSもCSSの塊もなく、ほとんどの場合問題を解決するでしょう。異なる場所に異なる画像を適用する必要がある場合は、単にクラスで区別します。.my-special-case img:before { ...

281
Svend

Spring in Action 3rd Edでこの解決策を見つけました。

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

更新：これはHTMLのみの解決策ではありません... onerrorはjavascriptです。

57
amit bakle
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

必ず画像の寸法を入力し、画像を並べて表示するかどうかを入力してください。

15
lambacck

HTMLだけでは不可能だと思います。しかし、JavaScriptを使用すると、これは実行可能になるはずです。基本的に各画像をループして、それが完成しているかどうかをテストし、それがnaturalWidthがゼロである場合、それはそれが見つからないことを意味します。これがコードです：

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

このように使用してください。

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

ChromeとFirefoxでテスト済み

13
Pim Jager

もしAngular/jQueryを使っているなら、これは役に立つかもしれません...

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

説明

itemがnullの可能性があるプロパティurlを持つと仮定すると、それがイメージであると壊れているように見えます。これにより、前述のようにonerror属性式の実行がトリガーされます。上記のようにsrc属性をオーバーライドする必要がありますが、altSrcにアクセスするにはjQueryが必要になります。 Vanilla JavaScriptでは機能しませんでした。

ちょっと厄介に思えるかもしれませんが、私のプロジェクトでその日を節約しました。

12
Obie
<img style="background-image: url(image1), url(image2);"></img>

背景画像を使用すると、複数の画像を追加できます。私の場合、image1がメイン画像です。これはどこかの場所から取得されます（ブラウザはリクエストを行います）。image2はimage1がロードされている間に表示されるデフォルトのローカル画像です。 image1が何らかのエラーを返した場合、ユーザーには何の変更も表示されず、これはユーザーエクスペリエンスにとってきれいです。

11
Emiliano Barboza

HTMLのみのソリューション。唯一の要件は、挿入しているイメージのサイズを知っていることであることです。フィラーとしてbackground-imageを使用しているため、透明な画像には機能しません。

指定された画像が見つからない場合に表示される画像をリンクするためにbackground-imageを正常に使用できます。それから唯一の問題は壊れたアイコン画像です - 非常に大きな空の文字を挿入することによってそれを削除することができます、それで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

CSSのみのソリューション（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;
}
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

または、jsfiddleの場合： https://jsfiddle.net/xehndm3u/9/

7
eithed

角度2：

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
6
user3601578

あなたのページを閲覧しようとする無数のクライアント（ブラウザ）を確認する方法はありません。考慮すべき1つの側面は、電子メールクライアントは事実上のWebブラウザであり、そのようなtrickamajickeryを処理できないかもしれないということです...

そのため、このように、デフォルトの幅と高さのalt/textも含める必要があります。これは純粋なHTMLソリューションです。

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

そのため、他の良い答えは次のように少し修正されます。

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

Chromeのobjectタグに問題がありましたが、これにも当てはまると思います。

あなたはさらに非常に大きくなるように代替テキストをスタイルすることができます...

だから私の答えはニースalt/textフォールバックでJavascriptを使うことです。

私はこれもおもしろいと思いました： 画像のalt属性をスタイルする方法

4
Xofo

単純なimg要素はそれほど柔軟ではないので、私はそれをpicture要素と組み合わせました。このようにCSSは必要ありません。エラーが発生すると、すべてのsrcsetが代替バージョンに設定されます。リンク切れ画像は表示されません。不要なイメージバージョンはロードされません。 picture-elementは、レスポンシブデザインと、ブラウザでサポートされていないタイプの複数のフォールバックをサポートしています。

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

JQueryのモジュール化可能なバージョンで、ファイルの最後にこれを追加してください。

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

そしてimgタグで：

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

上記の解決策は不完全です、属性srcが見つかりませんでした。

this.srcとthis.attribute('src')は同じではありません、最初のものは画像への完全な参照を含みます、例えば、http://my.Host/error.jpg、しかし、属性はちょうど元の値を保持します、error.jpg

正しい解決策

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
3
Seb

Angular 1.xを使用している場合は、任意の数の画像にフォールバックできるようにするディレクティブを含めることができます。 fallback属性は、単一のURL、配列内の複数のURL、またはスコープデータを使った角度表現をサポートします。

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

Angular Appモジュールに新しいフォールバックディレクティブを追加します。

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);
                });
            }
        };
    }])
2
Rob Evans

動的Webプロジェクトを作成し、必要な画像をWebContentに配置した場合は、Spring MVCで以下のコードを使用して画像にアクセスできます。

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

また、imgという名前のフォルダを作成し、その画像をフォルダimgの中に置き、そのimgフォルダをWebContentの中に置くことで、以下のコードを使用してその画像にアクセスできます。

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

Patrick /素晴らしい答えに加えて、クロスプラットフォームの角度付きjsソリューションを探しているあなたのために、ここに行く：

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

これは私が正しい解決策を見つけることを試みて遊んでいた急落です： http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

0
sunsay

いくつかの良い答えとコメントを含むシンプルできちんとした解決策。

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

無限ループのリスクも解決します。

私のために働きました。

0
manish kumar

Jqueryを使うと、次のようなことができます。

$(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");
    }
});
0
Jon

どの画像でも、このJavaScriptコードを使用してください。

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

ここでptImageは、document.getElementById()によって取得された<img>タグアドレスです。

0
José Esteves Pereira

グーグルはこのページを "image fallback html"キーワードに捨てたが、上記のどれもが助けにならなかったので、そして私は "<svg fallback support IE below 9"を探していたのでこれは私が見つけたものです：

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

話題にはならないかもしれませんが、それは私自身の問題を解決し、他の人にも役立つかもしれません。

0
iorgu