Показать картинку заглушку, при получении битой ссылки на картинку

Question

столкнулся с проблемой, получаю ссылку на картинку с бэкэнда. Некоторые ссылки битые, и ничего не показывают. Как заменить битую ссылку на путь до картинки заглушки, которая лежит у меня в проекте?

Код:

<img :src="preview_url" alt="Превью" class="preview">

где preview_url глобальная переменная, условно: https://placeimg.com/200/300/cats. С каждым запросом мы получаем разную ссылку на картинку.

Пробывал так-

<img :onerror="this.src= '../../assests/myImg.jpg'" :src="preview_url" alt="Превью" class="preview"> , не помогло.

UPD

Так же пробывал сделать как в это ответе. И изменить preview_url в событии onload и onerror. Ноль реакции.

<img :onerror="preview_url = '../../assests/myImg.jpg'" :src="preview_url" alt="Превью" class="preview"> как-то так — Dmytro, Oct 22 '19 at 07:20
@Дмытрык Есть один нюанс, когда используется оператор : пред src, картинка до которой указан путь '../../assests...'" не отображаться — Jack Shepard, Oct 22 '19 at 07:26
директива :, указывает на то, что к этому аттрибуту необходимо примениить значение переменной. Если картинка, до которой указан путь, не отображается, то, скорее всего, проблема в пути или в картинке. Посмотрите в итоговом html - что там — Dmytro, Oct 22 '19 at 07:29

yar85 · Accepted Answer · 2019-10-22T08:22:51.060

new Vue({
  el: '#app', 
  data: {
    images: [
      'https://example.com/not-exists-1.jpg', 
      'https://picsum.photos/200/120/?random',
      'https://example.com/not-exists-2.jpg'
    ], 
    img404: 'https://i.imgur.com/st2SrKk_d.jpg?maxwidth=640'
  }
});

#app img { height: 120px; margin: 0 0.2rem; }

<div id="app">
  <img
    v-for="(src, i) in images" :key="i" :src="src"
    @error="e => e.target.src = img404"
  >
</div>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

Если src как в примере, берутся из массива, и его содержимое изменяется в рантайме (например, новые картинки добавляются), то вот такой подход будет лучше:
@error="images.splice(i, 1, img404)"

Это заменит сам элемент в массиве, вместо изменения атрибута элемента.

При использовании @error на кастомных компонентах не выводящих это событие, нужно добавлять модификатор native.

score 2 · Answer 2 · answered Oct 22 '19 at 07:34

2

Можете сделать так:

<template>
  <div>
<img :onerror="imageLoadOnError" :src="preview_url" alt="Превью" class="preview">
  </div>
</template>

<script>
  import defaultImage from '../../assets/images/no-image.png';
  export default {
   methods: {
     imageLoadOnError(e){
       e.target.src = defaultImage;
     }
   }

  }
</script>

answered Oct 22 '19 at 07:34

Dmytro

6,756

Как я понимаю, проблема заключается в смене пути к файлу картинки. Получаем в виде: http://www.picshare.ru/view/10317000/ , если она поломалась, то пытаемся поменять путь на ../../assets/images/no-image.png';, поэтому она не отражается. – Jack Shepard Oct 22 '19 at 09:53
1

путь к картинке из кода компонента не совпадает с тем, который в итоге, запрашивает браузер. Укажите путь, исходят из того, как будет запрашивать его браузер и все получится – Dmytro Oct 22 '19 at 10:53

score 1 · Answer 3 · answered Oct 22 '19 at 07:23

Я когда-то делал через background-image. То есть если картинка не прогрузилась, то у нее фон, как у, например, divа, а если прогрузилась - картинка ее перекрывает.

Ну и нужно min-width и min-height задать, думаю.

Показать картинку заглушку, при получении битой ссылки на картинку

3 Answers3