Question

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

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

您可以使用func＆＃34; file_get_contents＆＃34;在try-catch块中。我知道我不是最好的方式，但我可以为你工作。

托盘（不是最佳方式）：

<?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'>";
        }
    ?>

如果已加载图像或404，则检查刀片视图

2 个答案: