VueJs @error для обработки неработающих ссылок в изображениях - PullRequest
Новая
       21

VueJs @error для обработки неработающих ссылок в изображениях

0 голосов
/ 30 ноября 2018

Я сталкиваюсь со странной проблемой с обработчиком vueJs @error, что я хочу
сделать, это скрыть изображения с неработающими ссылками и вместо них отобразить заполнитель, но если у меня для примера два изображения и оба из нихимеют неработающие ссылки, только первое изображение неработающей ссылки отображает местозаполнитель, в то время как другое изображение с неработающей ссылкой просто отображает логотип по умолчанию для сломанного изображения в браузере

. Вот код, который я сделал для тестирования,Я знаю, что это неправильный способ написания кода в Vue, но это было для целей тестирования 

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error="handle()">
    <img width="25%" id="img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error="handle()">
    <img v-show="ifImageBroken" src="https://via.placeholder.com/300">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    handle : function() {
     document.getElementById('img').style.display = 'none'
     this.ifImageBroken = true;
     this.brokenText = 'unable to load image'
    }
  }
};
</script>

Я просто хотел знать, может ли эта директива @error обрабатывать несколько случаев испорченных изображений

1 Ответ

0 голосов
/ 30 ноября 2018

Я сталкиваюсь с той же проблемой и использую object для ее решения, поскольку @error зависит от неработающих ссылок, но не от неработающих изображений внутри ссылок, поэтому я создаю что-то для переключения между ними 

<object data="https://here the right image if not found will display the image inside img tag.jpg" type="image/png">
    <img src="https://via.placeholder.com/300" alt="Not found image">
</object>

Впервый проверит, найден ли :data в object или нет, если он не найден, он переключится на тег <img>, и здесь вы поместите изображение-заполнитель,

Обновление 2: я использую ваш код иобновите его, я надеюсь, что это сработает 

  <div id="app">
    <img width="25%" id="img" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error="imgPlaceholder">

    <img width="25%" id="img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error="imgPlaceholder">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    imgPlaceholder(e) {
        e.target.src = "https://via.placeholder.com/300"
    }
  }
};
</script>

Здесь я создаю новый метод, который принимает событие и заменяет текущее прерванное изображение URL-адреса другим

...