Question

我正在使用vuejs和laravel作为后端，并且我有一个将用户头像图片存储在存储中的表单，并且我试图使用vuejs在用户的个人资料页面中在前端显示图像，并且我能够显示头像图片前端的用户，但在控制台中，尽管前端显示了头像图片，但我收到GET http://127.0.0.1:8000/storage/profiles/ 404 (Not Found)错误。

我在前端部分显示用户头像图片的操作是：

<img class="img-circle" :src="getProfilePhoto()" alt="User Avatar">

getProfilePhoto(){
    let photo = this.form.photo.indexOf('base64') != -1 ? this.form.photo : 'storage/profiles/'+this.form.photo;
    return photo;
}

Answer 1

在某个时候this.form.photo是一个空字符串。浏览器向URL发出请求，出现404错误，并呈现丢失的图像。

然后this.form.photo的值更改，这将触发重新渲染，然后重新运行该函数，将src更改为新值并呈现实际图像。

您需要考虑未设置this.form.photo的可能性。

例如，您可以：

getProfilePhoto(){
    let photo = "/static/default-profile.png";
    if (this.form.photo) {
        if (this.form.photo.indexOf('base64') != -1) {
            photo = this.form.photo;
        } else {
            photo = 'storage/profiles/' + this.form.photo;
        }
    }
    return photo;
}

GET http://127.0.0.1:8000/storage/profiles/ 404（未找到）

1 个答案: