Question

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

我已经通过使用chai.js和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 ...>文件中，我被用来将图像附加到<img v-bind:src="urlImg"> HTML标签上，如下所示：

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

然后在javascript部分中指定如下网址：

image/jpeg

，但是在这种情况下，我无法提供URL，因为HTTP GET期望正文返回内容类型为image/jpeg的图像。

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

编辑

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

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

Answer 1

如果您已有Buffer张图片，则可以在客户端应用中指定预定义的链接：

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 +请求的工作示例：My Gist

更新

通过ajax在浏览器中加载图像（下面的示例）。但是不可能使用本地浏览器XMLHttpRequest对象发送GET方法的请求主体（这是所有ajax库的基础）。来自MDN：

send（）接受一个可选参数，该参数可让您指定请求的正文；这主要用于请求（例如PUT）。如果请求方法是 GET 或 HEAD ，则 body参数将忽略 ，并且请求正文设置为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中显示原始图像内容类型

1 个答案: