Question

在我的laravel 5.8 / bootstrap 4.3 / vuejs“ ^ 2.5.17” /“ jquery”：“ ^ 3.4.1”应用中，我从远程网站读取数据服务和任何行都可以链接到图像，因此在我的模板中我做：

<td class="align-middle" style="width: 180px" v-if="nextSearchResult.PictureUrl">
    <img :src="nextSearchResult.PictureUrl" alt="" class=" mx-auto d-block" style="width:100px; height: auto; ">
</td>

但是当nextSearchResult.PictureUrl被填充但URL无效或某些URL返回“访问被拒绝”时，我的图像上出现了空白块。当然，我可以在服务器上检查所有数据是否都为红色，但是这样的检查会增加我的远程请求的工作时间。是否有办法使用JS / vuejs / jquery在客户端上进行此检查？

谢谢！

Answer 1

尝试一下：

<td v-if="nextSearchResult.PictureUrl" class="align-middle" style="width: 180px">
    <img :src="nextSearchResult.PictureUrl" alt="" class=" mx-auto d-block" style="width:100px; height: auto; ">
</td>
<td v-else class="align-middle" style="width: 180px">
 <div>Sorry we are having trouble loading this image</div>
</td>

如果要在代码中查看，只需编写一个计算属性：

computed: {
   isPicture(){
         const value =  this.nextSearchResult.PictureUrl
         if (value === some option I dont like){
         return false
    }
    return true
    }

如何检查客户端是否正确加载了图像

1 个答案: