[Trick] Handling broken link in image in Vue.js

ปัญหา classic สำหรับการแสดงผลเกี่ยวกับรูปภาพ tag <img /> คือ ลิ้งค์เสีย หรือ ลิ้งค์เข้าถึงไม่ได้แล้ว (error 404) ทำให้เกิด error ขึ้น ซึ่งก็จะดูไม่สวมงามสักเท่าไร เพราะฉะนั้นเราควรที่จะให้มันแสดงรูปภาพ default แทนหากลิ้งค์นั้นเสีย ทำอย่างไรนั้น ไปดูกันเลยครับ

onerror Event Attribute

onerror เป็น event ที่จะถูก trigger ให้ทำงานเมื่อมี error เกิดขึ้นในขณะโหลดไฟล์จากภายนอก เช่น document หรือ image

ปกติจะเรียกใช้ผ่าน attribute ชื่อ onerror ใน vue.js สามารถเรียกใช้ด้วย @error ตามตัวอย่างด้านล่าง

แบบทั่วไป

// เรียกฟังก์ชั่น
<img src="image.gif" onerror="replaceByDefault()">
or
// กำหนดใน attribute เลย
<img src="image.gif" onerror="this.onerror=null;this.src='<URL>'">

แบบ Vue.js

<template>
   <div :key="index" v-for="(item, index) in list">
      <img :src="item.logo" @error="replaceByDefault">
   </div> 
</template>

<script>
import defaultImg from '<URL>'
export default {
  methods: {
    replaceByDefault(e) {
      e.target.src = defaultImg
    }
  }
}
</script>

ในกรณีที่ต้องการใช้รูปใน assets ก็สามารถทำได้เช่นกัน

//ES6 Modules
import defaultImg from '<relative_path>'
//CommonJS
const defaultImg = require('<relative_path>')