Question

44

Display raw image content-type in vue.js

rated 0 times [ 49] [ 5] / answers: 1 / hits: 18000 / 6 Years ago, wed, july 18, 2018, 12:00:00

I am retrieving an image from a REST API via an HTTP GET with a request body.

I've managed to check the returned content via this test using node.js and 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

In the vue.js file I was used to attach an image to an <img ...> HTML tag like this:

<img v-bind:src=urlImg>

Then specifying in the javascript part the URL like this:

# this string representing the URL is returned by a function

this.urlImg = 'http://example.com/my_img.jpeg'

but in this case I am not able to provide the URL because the HTTP GET is expecting a body to return the image with content type image/jpeg.

I am not even sure this is possible and I may be misunderstanding how the content type image/jpeg is supposed to work. How do I do this in vue.js? Is it possible at all? Is there a way to check the image content of this HTTP response as with stuff like Postman (Chrome app) I can not inspect the response pretending to treat it as text/Json.

EDIT

Regarding the accepted answer: the last proposed solution (UPDATE 2) worked for me (using HTTP POST providing a JSON body for the request). Make sure you use axios (https://github.com/axios/axios) to perform the HTTP requests (you can import it in the <script> part of the Vue file like this: import axios from axios;).

I was using vue-resource (https://github.com/pagekit/vue-resource) pretending it was the same as axios, but it is not and it took me a while to realize it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rashawn

Add To Favorites

Follow

Total Points: 451

Total Questions: 83

Total Answers: 83

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

answered 6 Years ago kylanalis · Accepted Answer

If you already have Buffer of your image you can specify pre-defined link in your client app:

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

And define route to send image from server to client (for 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); 

 });

Working example for Express+request: My Gist

UPDATE

Load image in browser via ajax (example below). But it is not possible to send request body for GET method with native browser XMLHttpRequest object (this is base for all ajax libraries). From 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/[email protected]/dist/vue.js></script>

<div id=app>

  <img :src=src alt=>

</div>

UPDATE 2

Decode image as array buffer

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/[email protected]/dist/vue.js></script>

<div id=app>

  <img :src=src alt=>

</div>