이미지가로드 된 경우 블레이드보기에서 체크인 또는 404

Question

이미지가 실제로 있는지 여부를 확인하려면 블레이드보기를 체크인 할 수 있습니까? 검색 창에서 결과를 표시해야합니다. 결과는 정보가있는 많은 상자와 각 상자의 그림입니다. 포인트는 내 DB에 있습니다. 원격 서버에있는 이미지 및 로컬로 저장된 이미지의 이름에 대한 링크를 저장합니다. 그래서 내가하고있는 일은 파일이 로컬에 존재하는지 확인하는 것입니다. 그렇다면 사용하고 원격 서버를 보지 않을 경우 (그림 데이터가 NULL이거나 원격 서버에있는 경우). 파일이 컬을 사용하고 있는지 확인하려고했는데 큰 콜렉션에서는 마침내 데이터를 뷰에 침투하는 데 너무 많은 시간이 걸렸습니다 (모든 링크를 확인해야합니다). 그래서 가능하다면 그림이 깨지지 않으면 (404) 블레이드보기에서 직접 확인하고, 그렇다면 "image-not-found.png"로 바꾸어 로컬로 저장하십시오. 어떻게해야합니까?

Answer 1

일반적으로 img 태그의 onerror 이벤트를 사용하여 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 및 웹팩

<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

당신은 시도 - 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'>"; 
     } 
    ?>