Vue.js從Node.js res.sendFile加載圖像

Question

在創建Vue的過程中，我使用axios連接到服務器以檢索圖像，如下所示：

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

我的nodejs將收到請求並發送響應，如下所示

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

我的圖片應該加載到我的代碼中

<img :src="this.logo">

我很肯定我正確地（至少是nodejs）圖像文件，因為如果我只是在data.logo的末尾附加一些字符串，我的Vue和ENOENT: no such file or directory, stat 'D:\\web\\musleh-api\\uploads\\1542208727664_logo_sdam.png'中將出現404 not found錯誤ENOENT: no such file or directory, stat 'D:\\web\\musleh-api\\uploads\\1542208727664_logo_sdam.png'我的nodejs中的ENOENT: no such file or directory, stat 'D:\\web\\musleh-api\\uploads\\1542208727664_logo_sdam.png'錯誤

但是，沒有圖像被加載，如果我們嘗試使用任何文本編輯器打開圖像文件，我的console.log(this.logo)將顯示有趣的符號，我認為這是圖像文件。

我錯過了什么？

Answer 1

我相信您需要做的是在HTML代碼中執行此操作，假設您的圖片是base64編碼的：

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

這是來源

如上所述，加法似乎不起作用：

經過一些研究，我認為我們在這里並沒有完全走錯路，但是可以嘗試一下：

在NodeJS方面，請嘗試以下操作：

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

然后像以前一樣在VueJS中：

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

或簡便的方法：

在NodeJS方面，請嘗試以下操作：

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

同樣，這里的Vuejs代碼仍然保持不變。

Answer 2

假設您要傳遞學校ID來請求圖像，則不需要axios進行請求，可以直接將<img src>標記與動態參數一起使用以請求數據。 您還需要更改表達配置，以返回Content-Type:'image/png'或數據的MIME類型的Content-Type:'image/png' 。

然后在vue模板上，您需要將學校ID傳遞到動態路由，數據請求和處理將由img元素完成

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