Vue组件Options API转Composition API：图片预览失效问题求助

你将正常工作的Options API图片上传预览组件转为Composition API后无法显示图片，问题出在以下三个关键错误：

• 变量名大小写不匹配：脚本里定义的是imageURL（大写URL），但模板里用的是imageUrl（小写Url），导致模板无法正确读取响应式变量
• 未生成图片预览URL：原Options API中通过URL.createObjectURL(file)生成可被<img>识别的预览地址，你直接把File对象赋值给了imageURL.value，而<img>的src属性需要的是可访问的资源URL，不是原始File对象
• 模板中错误使用.value：在<script setup>的模板环境中，ref响应式变量会自动解包，不需要手动添加.value访问

修正后的完整代码 #

<script setup>
import { ref } from 'vue';

// 统一变量名，与模板使用的名称保持一致
const imageUrl = ref(null);

const onChange = (e) => {
  const file = e.target.files[0];
  // 调用API生成图片预览的临时URL
  imageUrl.value = URL.createObjectURL(file);
}
</script>

<template>
    <input type="file" accept="image/*" @change="onChange" />
    <div id="preview">
      <!-- 模板直接使用ref变量名，无需手动解包 -->
      <img v-if="imageUrl" :src="imageUrl" />
    </div>
</template>

额外优化：避免内存泄漏 #

使用URL.createObjectURL生成的临时URL会占用浏览器内存，建议在组件卸载或更换图片时释放资源，可通过onUnmounted钩子实现：

<script setup>
import { ref, onUnmounted } from 'vue';

const imageUrl = ref(null);

const onChange = (e) => {
  // 更换图片时先释放之前的临时URL
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value);
  }
  const file = e.target.files[0];
  imageUrl.value = URL.createObjectURL(file);
}

// 组件卸载时清理临时URL
onUnmounted(() => {
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value);
  }
});
</script>

内容的提问来源于stack exchange，提问作者Yolo_chicken