Question

当前，我必须在后端上跟随控制器，以提供先前上传的图像（我使用的是使用mongoose连接到mongoDB的gridfs-stream软件包）

module.exports = {
    image: async (req, res, next) => {
        gfs = req.app.get('gfs')
        _id = req.query.image_id
        gfs.findOne({ _id }, function (err, file) {
            if (err){
                console.log(err)
                return res.status(400).send(err);
            } 
            if (!file) return res.status(404).send('File not found.');
            res.set('Content-Type', file.contentType);
            var rs = gfs.createReadStream({
              _id
            });
            rs.on("error", function(err) {
              console.log(err)
              res.status(400).send(err);
            });
            rs.pipe(res);
          });   
    }
}

一切正常，但是当我尝试在img标签中呈现此图像时，只有声明了source属性的完整路径，即src =“ http：// localhost：3000 / image，我才能做得到？image_id = xxxxxxxxxxxxx”。但是，我从另一个请求中收到了image_id，并且必须通过Vuejs动态添加，这样我将拥有：

//On the html, the id is obtained dynamically.
<img v-bind:src="render(id)">

//On the script (methods)
render: function (id){
        //The following line does not produce image or error
        //return this.$axios.get('/image',{'params':{'image_id':id}}).then(res=> {return res;}).catch(err=>{console.log(err)})

        //The following line works perfectly
        return 'http://localhost:3000/image?image_id='+id

    }

如何在Vuejs中使用Axios完成相同的工作？最好的问候。

通过Axios在Vuejs中从GridFS渲染图像

0 个答案: