加载页面时收到错误
我的代码如下所示**:**
<script>
methods: {
getPicture() {
var base = this;
axios
.get("http://localhost:3000/pictures/" + this.username)
.then(function (response) {
const { pictureData } = response.data;
base.studentImage = "data:image/jpg; base64," + pictureData;
console.log(base.studentImage);
});
},
}, //END OF METHOD
</script>
我想在我的前端显示图像。我哪里出错了?先谢谢你。
1条答案
按热度按时间rekjcdws1#
欢迎使用堆栈溢出!
发生此错误的原因是DOM和/或Vue示例和/或模板在“studentImage”可用或定义错误之前使用了该值。
我建议删除变量“base”,因为Vue对“this”的使用非常挑剔,所以你通常不想显式地将“this”赋给变量。正如下面Estus Flask所评论的,这甚至适用于常见的JS。检查here以获得更多关于在JS中引用正确的“this”的信息。
老实说,从我所看到的您所共享的代码来看,这很可能就是您的错误的原因。您需要在数据对象中定义“studentImage”,以便Vue知道它的存在。
以下是一个示例:
如果不是,那么在适当的生命周期中,在示例中使用“studentImage”和/或调用方法“getPicture”之前,您需要确保检查“studentImage”。
我在回答这个问题时假设您使用的是Vue的最新版本,即第三版。
如果这有帮助,请让我知道!