Vue js - 이미지 소스를 찾을 수 없을 때 alt 이미지 설정

Vue js - 이미지 소스를 찾을 수 없을 때 alt 이미지 설정

저는 상품 목록이 있는 사이트에서 일하고 있습니다.각 제품에는 대응하는 이미지가 있습니다.아래와 같이 소스 속성에 이미지 URL을 바인딩합니다.

<img :src="product.ImageUrl"/>

이미지를 찾을 수 없는 경우 기본 이미지를 표시합니다.

cshtml 면도기 구문에서 아래와 같이 합니다(참고용으로만).

onerror='this.onerror = null;this.src = "@Url.Content("~/images/photo-not-available.jpg")";'

Vue에서도 같은 것을 실현하려면 어떻게 해야 합니까?

설정할 수 있습니다.onerror핸들러 기능@errorVue:

<img :src="" @error="aVueFunctionThatChangesTheSrc">

순수 js에서는 이렇게 onerror를 인라인으로 설정하기 때문에

<img :src="ImgUrl" onerror="this.src='http://example.com/default.jpg'"/> 

vue.timeout의 경우 교체할 수 있습니다.

<img :src="ImgUrl" @error="$event.target.src='http://example.com/default.jpg'"/> 

@error 함수에서 src를 변경하면 업데이트의 끔찍한 끝없는 루프가 시작되고 화면이 깜박이는 등의 원인이 된다는 것을 알게 되었습니다.지금까지의 솔루션은 다음과 같습니다.

<span v-if="props.column.field === 'avatar'">
  <span v-if="props.row.avatar">
    <img alt="avatar" class="round-32" :src="`${props.row.avatar}`" @error="(() => props.row.avatar = null)"/>
  </span>
  <span v-else>
    <img alt="avatar" class="round-32" src="../../../assets/images/avatar-2.jpg"/>
  </span>
</span>

저는 @error를 사용하려고 했지만, 제 경우 이미지를 찾을 수 없었기 때문에 이 이미지를 사용하여 작업을 시도합니다.

<img :src="getImgUrl(filename)">

methods: {
    getImgUrl(filename){
      try{ 
        return require(`@/assets/${filename}`)
      }catch(_){
        return require(`@/assets/default.png`)
      }
    },
}

폴백 이미지를 설정하여 루프를 방지하도록 지시했습니다.

image-src-fallback 입니다.js

const setSrc = (evt) => {
  const el = evt.currentTarget;
  el.setAttribute("src", el.fallback);
  el.fallback = "";
  el.removeEventListener("error", _listener);
};

const _listener = (evt) => setSrc(evt);

export default {
  bind(el, binding) {
    el.fallback = binding.value;
    el.addEventListener("error", _listener);
  },

  unbind(el) {
    el.removeEventListener("error", _listener);
  },
};

글로벌 Import

import imageSrcFallback from "./directives/image-src-fallback.js";
Vue.directive("src-fallback", imageSrcFallback);

사용하다

<img
  v-src-fallback="user.avatar_fallback_url"
  :src="user.avatar_url"
/>

경우에 따라서는 클라이언트가 이미지를 업로드하지 않았기 때문에 일부 이미지를 찾을 수 없는 경우 등 메서드를 작성할 수 있습니다.그러면 임의의 이미지에 대해 임의의 값을 이미지 또는 단순한 ""로 반환할 수 있습니다.

<div class="flex-shrink-0">
            <img
              class="h-72 w-full object-cover"
              :src="showFirstImageGallery(p.project_images)"
            />
          </div>

methods: {
    showFirstImageGallery(v){
        if (v.length > 1) {
            return v[1].img_url
        } else {
            return ''
        }
    }
  },

언급URL : https://stackoverflow.com/questions/49037906/vue-js-set-alt-image-when-image-source-not-found