vue3 ts 图片以流的形式返回 前端如何展示

在Vue 3和TypeScript中展示流式图片，可以使用`ref`和`createObjectURL`函数。以下是一种实现方法：

1. 首先，在Vue组件中，使用`ref`函数创建一个响应式的变量用于存储图片的URL：

import { ref } from 'vue';

export default {
  setup() {
    const imageSrc = ref('');

    // ...

    return {
      imageSrc,
      // ...
    };
  },
};

2. 在获取流数据的回调函数中，使用`createObjectURL`函数将流数据转换为URL，并将其赋值给`imageSrc`：

fetch('your_image_url')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    imageSrc.value = url; // 设置变量的值
  });

在上述代码中，`your_image_url`是从后端获取流数据的URL，可以根据实际情况进行修改。

3. 在模板中，使用`v-bind`指令将响应式变量绑定到`<img>`标签的`src`属性上：

<img :src="imageSrc" alt="流式图片">

通过将`imageSrc`变量绑定到`src`属性，当`imageSrc`的值发生变化时，`<img>`标签会自动更新展示的图片。

请注意，以上代码只是一种实现方式，实际情况可能需要根据具体情况进行适当调整。另外，确保在适当的时候清除临时URL，以避免内存泄漏，可以在组件销毁前使用`URL.revokeObjectURL()`函数来释放URL资源。