Рендеринг изображений из GridFS в Vuejs через Axios - PullRequest
Новая
       19

Рендеринг изображений из GridFS в Vuejs через Axios

0 голосов
/ 04 декабря 2018

В настоящее время мне нужно, чтобы на моем бэкэнде следовал контроллер, обслуживающий ранее загруженные изображения (я использую пакет gridfs-stream, подключенный к mongoDB с помощью mongoose): 

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. Я могу сделать это только в том случае, если я объявляю полный путь к исходному атрибуту, то есть: 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

    }

Как я могу добиться того же, используя Axios в Vuejs? С уважением.

...