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
    22 окт 2019 в 7:20
  • @Дмытрык Есть один нюанс, когда используется оператор : пред src, картинка до которой указан путь ` '../../assests...'" ` не отображаться 22 окт 2019 в 7:26
  • директива :, указывает на то, что к этому аттрибуту необходимо примениить значение переменной. Если картинка, до которой указан путь, не отображается, то, скорее всего, проблема в пути или в картинке. Посмотрите в итоговом html - что там
    – Dmytro
    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';, поэтому она не отражается. 22 окт 2019 в 9:53
  • 1
    путь к картинке из кода компонента не совпадает с тем, который в итоге, запрашивает браузер. Укажите путь, исходят из того, как будет запрашивать его браузер и все получится
    – Dmytro
    22 окт 2019 в 10:53
1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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