如果图像已加载或 404，请检查刀片视图答案

【问题标题】：check in blade view if image is loaded or 404如果图像已加载或 404，请检查刀片视图
【发布时间】：2018-03-09 06:37:37
【问题描述】：

有没有办法在刀片视图中检查图像是否真的存在？我需要显示搜索框的结果。结果是许多带有信息的框和每个框的图片。重点是在我的数据库中，我存储了指向远程服务器上的图像的链接以及本地存储的图像的名称。所以我正在做的是检查文件是否在本地存在，如果存在则使用它，如果不在远程服务器上查看（如果图片数据不为 NULL，则它存在于远程服务器中或在远程服务器中）。我试图使用 curl 检查文件是否存在并且它有效，但是对于大型集合，最终将数据吐出到视图中需要花费太多时间（必须检查每个链接）。因此，如果可能的话，我想要做的是直接在刀片视图中检查图片是否未损坏（404），如果是，则替换为我在本地存储的“image-not-found.png”。我该怎么做？

【问题讨论】：

标签： image laravel view controls blade

【解决方案1】：

您可以在 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'>";
        }
    ?>

【讨论】：

【解决方案2】：

我通常使用 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 和 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>

【讨论】：