在vue.js中显示原始图像内容类型
我正在通过带有请求体的HTTP从REST检索图像。
我通过这个测试使用node.js和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">然后在javascript部分中指定如下URL：
# this string representing the URL is returned by a function
this.urlImg = 'http://example.com/my_img.jpeg' 但在这种情况下，我无法提供URL，因为HTTP期望一个主体返回内容类型为image/jpeg的图像。
我甚至不确定这是可能的，我可能误解了内容类型image/jpeg应该如何工作。我如何在vue.js中做到这一点？有可能吗？有没有办法检查这个HTTP响应的图像内容，就像使用Postman (Chrome应用程序)一样，我不能检查这个响应，假装它是文本/Json。
编辑
关于接受的答案:最后一个建议的解决方案(UPDATE 2)为我工作(使用HTTP为请求提供一个JSON )。确保使用axios (https://github.com/axios/axios)执行HTTP请求(您可以将其导入Vue文件的<script>部分，如：import axios from "axios";)。
我用vue-resource (https://github.com/pagekit/vue-resource)假装它和axios一样，但事实并非如此，我花了一段时间才意识到这一点。
Stack Overflow用户
发布于 2018-07-19 09:47:07
如果您已经拥有图像的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+request的工作示例：我的要旨
更新
通过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>
https://stackoverflow.com/questions/51411544
复制相似问题
腾讯云开发者
