title: Vuejs load image from nodejs res.sendFile
body: <p>In my vue's created, I use axios to connect to my server to retrieve an image as below:</p>
  
  <pre><code>created() {
      this.schoolID = localStorage.getItem('schoolID')
      console.log(this.schoolID)
      axios.get(process.env.MY_URL + '/public/logo', {
          params: {
              schoolID: this.schoolID
          }
      })
      .then(response =&gt; {
          this.logo = response.data
          console.log(this.logo)
      })
      .catch(e =&gt; {
          console.log(e.response)
          this.errors.push(e)
      })
  },
  </code></pre>
  
  <p>and my nodejs will receive the request and send the response like below</p>
  
  <pre><code>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);
      }
    });
  });
  </code></pre>
  
  <p>my image should be loaded into my code</p>
  
  <pre><code>&lt;img :src="this.logo"&gt;
  </code></pre>
  
  <p>I'm positive I got (at least the nodejs) the image file correctly because if I just append some string at the end of <code>data.logo</code>, I will get 404 not found error in my Vue and <code>ENOENT: no such file or directory, stat 'D:\web\musleh-api\uploads\1542208727664_logo_sdam.png'</code> error in my nodejs</p>
  
  <p>However, no image is being loaded,and my <code>console.log(this.logo)</code> will display funny symbols which I assume is the image file if we try to open it using any text editor. </p>
  
  <p>What did I miss?</p>