How to show the raw image content-type using Vue.js

Question

How to show the raw image content-type using Vue.js

When retrieving an image from a REST API through an HTTP GET with a request body, I have successfully verified the returned content 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 my vue.js file, I typically attach an image to an <img ...> HTML tag as follows:

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

I specify the URL in the JavaScript part like this:

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

However, in this scenario, providing the URL is not possible because the HTTP GET expects a body to return the image with content type image/jpeg.

I am unsure if this is feasible and if my understanding of the content type image/jpeg is correct. How can I accomplish this in vue.js? Is it even doable? Is there a way to check the image content of the HTTP response similar to tools like Postman (Chrome app) which cannot inspect the response pretending to treat it as text/JSON.

EDIT

Regarding the accepted answer: the last solution proposed (UPDATE 2) worked for me (using HTTP POST with a JSON body for the request). Ensure you utilize axios (https://github.com/axios/axios) for performing the HTTP requests (you can import it in the <script> section of the Vue file like this: import axios from "axios";).

I initially used vue-resource (https://github.com/pagekit/vue-resource) thinking it was similar to axios, but it took some time for me to realize that they are different.

javascript vue.js content-type imagejpeg

Answer 1

Answer №1

If you have a pre-defined Buffer for your image, you can set a specific link in your client app:

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

To send the image from the server to the client (using Express), define the route as follows:

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); 
 });

Here is a working example for Express+request: My Gist

UPDATE

You can load an image in the browser via AJAX. However, it's not possible to send request body for the GET method with the native browser XMLHttpRequest object according to MDN:

send() accepts an optional parameter that lets you specify the request's body; this is primarily used for requests like 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: {
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            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/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

UPDATE 2

Decoding an image as an array buffer

var app = new Vue({
    el: "#app",
    data: {
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            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/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

Answer 2

If you have a pre-defined Buffer for your image, you can set a specific link in your client app:

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

To send the image from the server to the client (using Express), define the route as follows:

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); 
 });

Here is a working example for Express+request: My Gist

UPDATE

You can load an image in the browser via AJAX. However, it's not possible to send request body for the GET method with the native browser XMLHttpRequest object according to MDN:

send() accepts an optional parameter that lets you specify the request's body; this is primarily used for requests like 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: {
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            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/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

UPDATE 2

Decoding an image as an array buffer

var app = new Vue({
    el: "#app",
    data: {
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    },
    created() {
        let config = {
            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/dist/vue.js"></script>
<div id="app">
  <img :src="src" alt="">
</div>

How to show the raw image content-type using Vue.js

Answer №1

Similar questions

What is the best way to remove an object element by index within AngularJS?

The request to sign up at http://localhost:3000/api/signup resulted in a 400 (Bad Request

What could be causing my insertRow function to inject empty cells into my table?

Exploring through a dynamically generated table containing JSON data

The rendering of the component is experiencing issues when using react-router

Is there a way to customize the ripple effect color on a Button?

function to choose in antd datepicker component

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Tips for navigating a list of areas in JavaScript

Surprising outcome arising from simultaneous execution of numerous asynchronous operations on every individual object within an array

Why is my Ajax utilizing PHP _POST not functioning as expected?

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

initiating a submission upon the occurrence of an onchange event on an input field of type "file"

Dealing with a syntax error in JavaScript (Codecademy)

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Attempting to establish a connection with MongoDB through Realm

modify the getters in the Vuex store

The issue I am encountering is that the value from jQuery autocomplete is not getting transferred to the

Having trouble finishing the npm installation process

DOJO Dialogue Box Report - Problem