嘿，这个问题我之前也碰到过！你看到的乱码是因为默认的请求会把二进制图片数据当成文本解析，而图片本质是二进制流，所以才会出现一堆看不懂的字符。下面给你两种靠谱的解决办法，按需选择：

方法一：直接用img标签指向服务器路由（最简单） #

既然你的Express路由已经正确设置了content-type: image/png，浏览器可以直接识别这个路由返回的图片，所以你根本不需要手动发起请求获取数据，直接把路由地址作为img的src就行：

<template>
  <!-- 同域环境下直接写路由路径 -->
  <img :src="imageUrl" alt="用户头像" />
</template>

<script>
export default {
  data() {
    return {
      // 如果客户端和服务器跨域，这里要写完整的服务器地址，比如 http://your-server.com/get-image
      imageUrl: '/get-image'
    }
  }
}
</script>

这种方法最省心，除非你需要在请求里带认证信息（比如token），否则优先用这个。

方法二：通过请求获取二进制数据并转换（适合需要认证的场景） #

如果你的图片接口需要带请求头（比如Authorization token），那就要手动发起请求，但必须告诉请求库要接收二进制数据，而不是默认的文本。这里以axios和原生fetch为例：

用axios实现 #

<template>
  <img :src="imageBlobUrl" alt="用户头像" />
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      imageBlobUrl: ''
    }
  },
  async mounted() {
    try {
      // 关键：设置responseType为'blob'，告诉axios接收二进制Blob数据
      const response = await axios.get('/get-image', {
        responseType: 'blob',
        headers: {
          // 如果需要认证，在这里加请求头，比如 Authorization: `Bearer ${yourToken}`
        }
      })
      // 创建Blob URL用于展示图片
      this.imageBlobUrl = URL.createObjectURL(response.data)
    } catch (err) {
      console.error('加载图片失败:', err)
    }
  },
  // 组件卸载时记得清理Blob URL，避免内存泄漏
  beforeUnmount() {
    if (this.imageBlobUrl) {
      URL.revokeObjectURL(this.imageBlobUrl)
    }
  }
}
</script>

用原生fetch实现 #

<template>
  <img :src="imageBlobUrl" alt="用户头像" />
</template>

<script>
export default {
  data() {
    return {
      imageBlobUrl: ''
    }
  },
  async mounted() {
    try {
      const response = await fetch('/get-image', {
        method: 'GET',
        headers: {
          // 需要认证的话加在这里
        }
      })
      if (!response.ok) throw new Error('图片请求失败')
      // 把响应转成Blob对象
      const blob = await response.blob()
      this.imageBlobUrl = URL.createObjectURL(blob)
    } catch (err) {
      console.error('加载图片失败:', err)
    }
  },
  beforeUnmount() {
    if (this.imageBlobUrl) {
      URL.revokeObjectURL(this.imageBlobUrl)
    }
  }
}
</script>

额外注意：跨域问题 #

如果你的Vue客户端和Express服务器不在同一个域名下，记得在Express里配置CORS允许跨域请求：

const cors = require('cors')
const express = require('express')
const app = express()

// 允许所有跨域请求，也可以配置特定域名
app.use(cors())

// 你的路由...
app.get('/get-image', function(req, res) {
  res.sendFile(path.join(__dirname, '..', account.profileImg))
})

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