如何為 img 提供預設圖片？

實務上我們可能需要為 <img> 提供預設圖片，稍後再由 API 或外部網址提供圖片，此時可搭配 <img> 的 load event 實現。

Version

Vue

<template>
  <div>
    <img :src="imgUrl" alt="img" @load="onLoad">
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    imgUrl: 'https://fakeimg.pl/250x100/ff0000/'
  }),
  methods: {
    async onLoad() {
      let sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

      await sleep(2000)
      this.imgUrl = 'https://fakeimg.pl/250x100/0000ff/'
    },
  }
}
</script>

Line 3

<img :src="imgUrl" alt="img" @load="onLoad">

:src：直接綁定 imgUrl 提供預設圖片
@load：使用 <img> 的 load event 呼叫 API

Line 10

data: () => ({
  imgUrl: 'https://fakeimg.pl/250x100/ff0000/'
}),

imgUrl：提供預設圖片網址

Line 14

async onLoad() {
  let sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

  await sleep(2000)
  this.imgUrl = 'https://fakeimg.pl/250x100/0000ff/'
}

sleep() 只提供 delay 效果，不是本文重點
在 onLoad() 內提供其他圖片網址

Conclusion

因為src 會比 load event 早執行，因此可藉此提供預設圖片