Vue Img Base是一個可重用的Vue組件，它可以將圖像URL轉換為base64編碼，以減少圖像資源的加載時間。它使用了Vue.js的生命周期鉤子函數和HTML5的File API。

<template>
<div>
<img :src="baseImageSrc" alt="Image">
</div>
</template>
<script>
export default {
data() {
return {
image: null,
baseImageSrc: '',
}
},
methods: {
handleImageChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e =>{
this.baseImageSrc = e.target.result;
}
}
},
mounted() {
this.$refs.input.addEventListener('change', this.handleImageChange);
},
beforeDestroy() {
this.$refs.input.removeEventListener('change', this.handleImageChange);
},
}
</script>
<style scoped>
input {
display: none;
}
</style>
<!-- Usage -->
<img-base/>

使用此組件的方式非常簡單。只需將它放在組件中，并在模板中引用它。這將生成一個“選擇文件”的按鈕，點擊它將彈出文件選擇器。選擇圖像文件后，圖像將轉換為base64編碼，并在頁面上顯示。

該組件還使用了Vue.js的生命周期鉤子函數，確保在組件銷毀時清除所有事件偵聽器。

總的來說，Vue Img Base是一個非常有用的組件，可以為開發人員提供快速且簡潔的圖像資源加載解決方案。它非常適合那些需要在頁面上展示許多圖像的網站。