vue 拿到后端的图片数据并显示

要拿到后端的图片数据并显示，可以使用 Vue.js 搭配 Axios 和 Blob 对象进行实现。具体步骤如下：

1. 在 Vue.js 的组件中，使用 Axios 发送请求，获取后端的图片数据。

axios.get('/api/image', { responseType: 'blob' })
  .then(response => {
    // 将响应数据转换为 Blob 对象
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    // 调用 URL.createObjectURL() 方法创建图片 URL
    const imageUrl = URL.createObjectURL(blob);
    // 将图片 URL 存储到 Vue.js 的 data 中
    this.imageUrl = imageUrl;
  })
  .catch(error => {
    console.log(error);
  });

2. 在 Vue.js 的模板中，使用 img 标签显示图片。

<template>
  <div>
    <img :src="imageUrl" alt="图片">
  </div>
</template>

通过以上步骤，就可以在 Vue.js 中拿到后端的图片数据并显示。需要注意的是，由于图片数据是以 Blob 对象的形式返回的，所以需要使用 URL.createObjectURL() 方法创建图片 URL，而不是直接将响应数据赋值给 img 标签的 src 属性。同时，也需要在 Axios 的请求配置中设置 responseType 为 'blob'，以确保响应数据以 Blob 对象的形式返回。