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