<template>
    <img class="like" :src="imageUrl" alt="" />
</template>
<script setup>
const base64 = `data:image/gif;base64,[encoded data, 11012 characters]`;

const imageUrl = ref("");
let objectUrl = "";

onMounted(() => {
    // 1. 移除data协议前缀，提取纯Base64编码
    const pureBase64 = base64.replace("data:image/gif;base64,", "");

    // 2. 将Base64转换为Blob（二进制对象）
    const byteCharacters = atob(pureBase64);
    const byteNumbers = new Uint8Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const blob = new Blob([byteNumbers], { type: "image/gif" });

    // 3. 生成临时URL（每次生成的URL都不同，触发重新加载）
    objectUrl = URL.createObjectURL(blob);
    imageUrl.value = objectUrl;
});

// 组件卸载时释放临时URL，避免内存泄漏
onUnmounted(() => {
    if (objectUrl) URL.revokeObjectURL(objectUrl);
});
</script>
<style scoped>
.like {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    z-index: 10;
}
</style>
