Vuejs - 이미지 URL이 유효한지 또는 손상된지 확인

Vuejs - 이미지 URL이 유효한지 또는 손상된지 확인

각도 2와 정확히 동일함 - 이미지 URL이 유효한지, 파손되었는지 확인하십시오.

이것을 어떻게 vuejs로 구현할 수 있을까?

Vue.js는@error네가 관여할 수 있는 사건이야vuejs 발행 번호 3261부터.다음 작업을 수행하십시오.

<template>
   <img :src="avatarUrl" @error="imageLoadError" />
</template>

<script>
export default {
  methods: {
    imageLoadError () {
      console.log('Image failed to load');
    }
  }
};
</script>

편집: 이 기능도<audio>태그(그리고 나는 다음을 정의하는 다른 요소들이 의심스럽다.src속성 및 자산 로드)!

편집2: 바보 같은 나!실제로 많은 HTML 요소가 발산하는 네이티브 이벤트에 수신기를 추가하기 위한 인터페이스로, 이와 유사하다.<input @blur="someHandler">등

@error는 잘 되는 것 같다.나는 대체 이미지를 설정하기 위해 개인적으로 이벤트가 있는 방법을 사용했다.

<img :src="imageUrl" @error="imageUrlAlt">

방법:

imageUrlAlt(event) {
    event.target.src = "alt-image.jpg"
}

Vue.js 발행 번호5404에서.

최적의 솔루션:

<img :src="imageUrl" @error="imageUrl='alt-image.jpg'">

너의 소중한 코멘트에 모두에게 고마워.

나는 이렇게 @error 핸들러 대신 자리 표시자 URL로 문자열을 반환하는 계산된 속성을 사용한다.소스가 null이거나 정의되지 않은 경우 이 방법으로 자리 표시자가 로드된다.

<img :src="source || computedPropertyString" />

참조URL: https://stackoverflow.com/questions/43714852/vuejs-check-if-image-url-is-valid-or-broken