イメージがロードされているかブレードビューで確認するか、または404

Question

イメージが実際に存在するかどうかをブレードビューで確認する方法はありますか？ 検索ボックスから結果を表示する必要があります。 結果は、多くの情報が入ったボックスと各ボックスの画像です。 ポイントは私のDBにあります私は、リモートサーバ上の画像へのリンクと、ローカルに保存されている画像の名前を保存しています。 私がやっていることは、ファイルがローカルに存在するかどうかをチェックし、そうであればそれを使用し、リモートサーバを見ない場合です（ピクチャデータがNULLでない場合は、リモートサーバにあります）。 ファイルがカールを使って存在するかどうかチェックしようとしていましたが、大きなコレクションの場合、最終的にビューにデータを吐き出すには時間がかかりすぎます（すべてのリンクをチェックする必要があります）。 可能であれば、画像が壊れていない（404）場合はブレードビューで直接チェックし、そうであれば "image-not-found.png"と置き換えてローカルに保存します。どうやってやるの？

Answer 1

私は通常、imgタグのonerrorイベントを使用してJavaScriptでこれを処理します。通常、私はソリューションにいくつかの鐘や笛を追加しますが、これは一言で言えばそれです。

計画のJavaScript

function loadNextImage(id,uri){ 
    document.getElementById(id).src = uri; 
} 

プレーンHTML

<img src="http://local/image.jpg" 
    onerror="loadNextImage('image1', 'http://remote/imae.jpg'));" 
    id='image1' /> 

VueJSとのWebPACK

<template> 
    <img :src="local_url" @error="imgOnError()" ref="image"/> 
</template> 

<script> 
    export default{ 
    name: 'Thumbnail', 
    props: { 
     local_url: String, 
     remote_url: String 
    }, 
    methods: { 
     imgOnError: function (e) { 
     this.$refs.image.src = this.remote_url 
     } 
    } 
    } 
</script> 

Answer 2

あなたはtry-catchブロック内のFUNC "のfile_get_contents" を使用することができます。私は最良の方法ではないことを知っていますが、私はあなたのために働くことができます。

トレイこの（なし最良の方法）：

<?php 
     try{ 
      $img = 'myproject.dev/image.jpg'; 
      $test_img = file_get_contents($img); 
      echo "<img src='{$img}'>"; 
     }catch(Exception $e){ 
      echo "<img src='img/no-img.jpg'>"; 
     } 
    ?>