在 vue.js 中显示原始图像内容类型

Question

我正在通过带有请求正文的 HTTP GET 从 REST API 检索图像。

我使用 node.js 和 chai.js:

通过此测试设法检查了 returned 内容

      expect(res).to.have.header('Content-Type', 'image/jpeg');
      expect(res).to.have.header('Access-Control-Allow-Origin', '*');
      expect(res).to.have.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization');
      expect(res).to.have.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
      expect(res).to.have.status(200);
      expect(res.body).to.be.instanceof(Buffer); // the image content

在 vue.js 文件中，我习惯于将图像附加到 <img ...> HTML 标签，如下所示：

<img v-bind:src="urlImg">

然后在 javascript 部分指定 URL 如下：

# this string representing the URL is returned by a function
this.urlImg = 'http://example.com/my_img.jpeg'

但在这种情况下，我无法提供 URL，因为 HTTP GET 需要主体 return 内容类型为 image/jpeg 的图像。

我什至不确定这是否可行，我可能误解了内容类型 image/jpeg 应该如何工作。我如何在 vue.js 中执行此操作？有可能吗？有没有办法检查这个 HTTP 响应的图像内容，就像 Postman（Chrome 应用程序）一样，我无法检查假装将其视为 text/Json.

的响应

编辑

关于已接受的答案：最后提出的解决方案 (UPDATE 2) 对我有用（使用 HTTP POST 为请求提供 JSON 正文).确保使用 axios (https://github.com/axios/axios) 来执行 HTTP 请求（您可以将其导入 Vue 文件的 <script> 部分，如下所示：import axios from "axios";）。

我在使用 vue-resource (https://github.com/pagekit/vue-resource) 假装它与 axios 相同，但事实并非如此，我花了一段时间才意识到。

Answer 1

如果您已经有 Buffer 个图像，您可以在客户端应用程序中指定预定义的 link：

this.urlImg = '/my/url/to/get/dynamic/image';

并定义将图像从服务器发送到客户端的路由（对于 Express）：

server.get("my/url/to/get/dynamic/image", function(req, res) {
   var myBuffer = yourFunctionReturnsBuffer();
   res.writeHead(200, {
    'Content-Type': 'image/jpeg',
    'Content-Length': myBuffer.length
   });
   res.end(myBuffer); 
 });

Express+request 的工作示例：My Gist

更新

通过 ajax 在浏览器中加载图片（如下例）。但是无法使用本机浏览器 XMLHttpRequest 对象发送 GET 方法的请求正文（这是所有 ajax 库的基础）。来自 MDN：

send() accepts an optional parameter which lets you specify the request's body; this is primarily used for request such as PUT. If the request method is GET or HEAD, the body parameter is ignored and request body is set to null.

var app = new Vue({
    el: "#app",
    data: {
        // empty image
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            // example url
            url: 'https://www.gravatar.com/avatar/7ad5ab35f81ff2a439baf00829ee6a23',
            method: 'GET',
            responseType: 'blob'
        }
        axios(config)
          .then((response) => {
              let reader = new FileReader();
              reader.readAsDataURL(response.data); 
              reader.onload = () => {
                  this.src = reader.result;
              }
          });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

更新 2

将图像解码为数组缓冲区

var app = new Vue({
    el: "#app",
    data: {
        // empty image
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            // example url
            url: 'https://www.gravatar.com/avatar/7ad5ab35f81ff2a439baf00829ee6a23',
            method: 'GET',
            responseType: 'arraybuffer'
        }
        axios(config)
          .then((response) => {
              var bytes = new Uint8Array(response.data);
              var binary = bytes.reduce((data, b) => data += String.fromCharCode(b), '');
              this.src = "data:image/jpeg;base64," + btoa(binary);
          });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

在 vue.js 中显示原始图像内容类型

Display raw image content-type in vue.js

javascript

vue.js

content-type

imagejpeg