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和{{1 }}我的nodejs错误

但是，没有图像被加载，如果我们尝试使用任何文本编辑器打开图像，我的ENOENT: no such file or directory, stat 'D:\web\musleh-api\uploads\1542208727664_logo_sdam.png'将显示有趣的符号，我认为这是图像文件。

我想念什么？

Answer 1

我相信您需要做的是在HTML代码中执行此操作，假设您的图片是base64编码的：

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

Here is the source

上述添加似乎无效：

经过一些研究，我认为我们并不完全走错了路，但是可以尝试一下：

在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类型的图像。

然后在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);
    }
  });
});

Vue.js从Node.js res.sendFile加载图像

2 个答案: