[Laravel + vue] img src error, default image

안녕하세요. 달리는애아빠입니다.

Laravel + vue 를 활용하여 웹사이트를 개발하면서 img 태그를 활용시 default 또는 error 처리 내역입니다.

<template>
<img :src="post.image" :alt="post.subject" @error="replaceByDefault" width="300" height="300">
</template>
 
 
<script>
export default {
  
    methods:{
      
      replaceByDefault(e) {
        e.target.src = "images/noimage.png";
      }
    }
}
</script>

img : src  -> 정상적으로 image 경로 를 받아와서 적용시키게되면 저부분이 동작하고

@error -> 정상적으로 image 경로에서 파일을 못가져왔을시 replaceByDefault 라는 함수가 실행이되고 그 함수에는 

Laravel public 폴더 안에 images/noimage.png 를 표시하도록 구현해였습니다.

결과

기존 error 처리를 하지 않았을시에는 아래와같이 이미지가 깨져보이지만

error 처리를 한후에는 default 이미지인noimage 를 찾아서 적용된 부분입니다.

코드에 잘활용하시길 바랍니다.

미약하게나마 유용한 정보가 되었다면 구독 공감 버튼은 작성자에게 큰 힘이 됩니다. 감사합니다 ^^