Как проверить на клиенте, правильно ли загружено изображение

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
    }