1

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

Код:

<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. Ноль реакции.

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

3 ответа 3

3

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.

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>
2
  • Как я понимаю, проблема заключается в смене пути к файлу картинки. Получаем в виде: http://www.picshare.ru/view/10317000/ , если она поломалась, то пытаемся поменять путь на ../../assets/images/no-image.png';, поэтому она не отражается. Commented 22 окт. 2019 в 9:53
  • 1
    путь к картинке из кода компонента не совпадает с тем, который в итоге, запрашивает браузер. Укажите путь, исходят из того, как будет запрашивать его браузер и все получится
    – Dmytro
    Commented 22 окт. 2019 в 10:53
1

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.