title: Display raw image content-type in vue.js
body: <p>I am retrieving an image from a REST API via an HTTP GET with a request body.</p>
  
  <p>I've managed to check the returned content via this test using <code>node.js</code> and <code>chai.js</code>:</p>
  
  <pre><code>      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
  </code></pre>
  
  <p>In the <code>vue.js</code> file I was used to attach an image to an <code>&lt;img ...&gt;</code> HTML tag like this:</p>
  
  <pre><code>&lt;img v-bind:src="urlImg"&gt;
  </code></pre>
  
  <p>Then specifying in the javascript part the URL like this:</p>
  
  <pre><code># this string representing the URL is returned by a function
  this.urlImg = 'http://example.com/my_img.jpeg' 
  </code></pre>
  
  <p>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 <code>image/jpeg</code>. </p>
  
  <p>I am not even sure this is possible and I may be misunderstanding how the content type <code>image/jpeg</code> is supposed to work. How do I do this in <code>vue.js</code>? 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.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Regarding the accepted answer: the last proposed solution (<strong>UPDATE 2</strong>) worked for me (using HTTP POST providing a JSON body for the request). Make sure you use <code>axios</code> (<a href="https://github.com/axios/axios" rel="noreferrer">https://github.com/axios/axios</a>) to perform the HTTP requests (you can import it in the <code>&lt;script&gt;</code> part of the Vue file like this: <code>import axios from "axios";</code>). </p>
  
  <p>I was using <code>vue-resource</code> (<a href="https://github.com/pagekit/vue-resource" rel="noreferrer">https://github.com/pagekit/vue-resource</a>) pretending it was the same as <code>axios</code>, but it is not and it took me a while to realize it.</p>