Vuejs load image from nodejs res.sendFile

Question

In my vue's created, I use axios to connect to my server to retrieve an image as below:

created() {
    this.schoolID = localStorage.getItem('schoolID')
    console.log(this.schoolID)
    axios.get(process.env.MY_URL + '/public/logo', {
        params: {
            schoolID: this.schoolID
        }
    })
    .then(response => {
        this.logo = response.data
        console.log(this.logo)
    })
    .catch(e => {
        console.log(e.response)
        this.errors.push(e)
    })
},

and my nodejs will receive the request and send the response like below

router.get('/logo', function(req, res){
  School.findOne({ _id:  mongoose.mongo.ObjectId(req.query.schoolID) }).exec().then(function (data) {
    if (!data){
      console.log("error... no logo found for the given id: " + req.query.schoolID)
      return res.status(200).send({success: false, msg: 'No logo found.'});
    }else{
      res.sendFile(__dirname + '/uploads/' + data.logo);
    }
  });
});

my image should be loaded into my code

<img :src="this.logo">

I'm positive I got (at least the nodejs) the image file correctly because if I just append some string at the end of data.logo , I will get 404 not found error in my Vue and ENOENT: no such file or directory, stat 'D:\\web\\musleh-api\\uploads\\1542208727664_logo_sdam.png' error in my nodejs

However, no image is being loaded,and my console.log(this.logo) will display funny symbols which I assume is the image file if we try to open it using any text editor.

What did I miss?

Answer 1

I believe what you need to do is this in your HTML code, assuming that your image is base64 encoded:

<img alt="Awesome logo" :src="'data:image/png;base64,'+this.logo" />

Here is the source

Addition, as above seems not to work:

After some research I think we are not completely on the wrong path here, but give this a try:

On the NodeJS side try this:

    }else{
      var img = fs.readFile('__dirname + '/uploads/' + data.logo', function (err, data) {
        var contentType = 'image/png';
        var base64 = Buffer.from(data).toString('base64');
        base64='data:image/png;base64,'+base64;
        res.send(base64);
      });
   });
});

then in VueJS as before:

<img alt="Awesome logo" :src="this.logo" />

OR THE EASY WAY:

On the NodeJS side try this:

    }else{
        // prefix your domain if your API serves to other domains
        res.send('/uploads/' + data.logo');
      });
   });
});

Also here Vuejs code remains as you did it.

Answer 2

Assuming that you want to pass the school ID to request the image, you don't need axios to make the request, you can use directly the <img src> tag with a dynamic parameter to request the data. You also need to change you express configuration to return the image with Content-Type:'image/png' or whatever is the mime type of your data.

Then on vue template you will need to pass the school id to the dynamic route, the data request and handling will be done by the img element

<img :src="`/logo/${schoolID}">

.

router.get('/logo/:schoolID', function(req, res){
  School.findOne({ _id:  mongoose.mongo.ObjectId(req.params.schoolID) }).exec().then(function (data) {
    if (!data){
      console.log("error... no logo found for the given id: " + req.params.schoolID)
      return res.status(200)
                .send({success: false, msg: 'No logo found.'});
    }else{
      res.type('png') 
         .sendFile(__dirname + '/uploads/' + data.logo);
    }
  });
});