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

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;
}