在我在 vue chrome 开发工具中打开组件之前，数据属性中的图像文件路径不会显示答案

【问题标题】：Image file path in data property not showing until I open up the component in vue chrome dev tools在我在 vue chrome 开发工具中打开组件之前，数据属性中的图像文件路径不会显示
【发布时间】：2020-09-15 09:49:30
【问题描述】：

我正在尝试为头像构建一个图像预览系统：

<template>
    <div>
        <div class="level">
            <img :src="avatar" width="50" height="50" class="mr-1">
        </div>

        <form method="POST" enctype="multipart/form-data">
            <input type="file" accept="image/*" @change="onChange">
        </form>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                avatar: null,
                setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
            };
        },
        computed: {
            user() {
              return this.$store.state.user
            },
            avatar_path() {
                this.avatar = this.user.avatar_path
            },
        },
        methods: {
            onChange(e) {
                if (! e.target.files.length) return;
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = e => {
                    this.avatar = e.target.result;
                    this.persist(file);
                };
            },
            persist(avatar) {
                let data = new FormData();
                data.append('avatar', avatar);
                this.setAuthHeader;
                axios.post(`/settings/avatar`, data)
                    .then(() => flash('Avatar uploaded!'));
            }
        }
    }
</script>

在我的代码中，用户计算的属性从 vuex 返回一个 JSON 对象，该对象从本地存储中获取对象。

不断发生的情况是，当我刷新更改个人资料图像的页面时，默认图像不会显示。该元素在 chrome devtools 中如下所示：

<img width="50" height="50" class="mr-1">

当我打开 vue 开发工具时，点击这个功能所在的组件，图像 src 被添加：

<img width="50" height="50" class="mr-1" src="http://127.0.0.1:8000/storage/avatars/default.png">

【问题讨论】：

标签： image vue.js vuex

【解决方案1】：

您错误地使用了 avatar_path 计算属性：

您不应该修改计算属性中的状态（您正在分配给this.avatar）。
没有任何东西正在访问avatar_path 以便调用它。当您打开 Vue 开发工具时，开发工具代码会访问该属性，以便在组件数据 UI 中显示它。

最好的解决方法是将avatar 更改为这样的计算属性：

computed: {
  avatar() {
    if (this.user) {
      return this.user.avatar_path;
    } else {
      // Use a placeholder image URL
      return '/path/to/placeholder.png';
    }
  }
}

【讨论】：

对不起，我忘了添加我的方法，并试图做一些接近的事情，但在尝试更新this.avataronChange(e)时一直遇到问题
这在技术上是我提出问题的正确答案。我应该将此答案标记为正确并开始一个新问题吗？
如果新问题与这个问题不同，我不会有什么坏处（您会得到更多回复）。

【解决方案2】：

<template>
<div>
    <div class="level">
        <img :src="avatar" width="50" height="50" class="mr-1">
    </div>

    <form method="POST" enctype="multipart/form-data">
        <input type="file" accept="image/*" @change="onChange">
    </form>

</div>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
        };
    },
    computed: {
        user() {
          return this.$store.state.user
        },
        avatar() {
            return this.user.avatar_path;
        },
    },
    methods: {

    }
}

【讨论】：