Путь к файлу изображения в свойстве данных не отображается, пока я не открою компонент в инструментах vue chrome dev

Question

Я пытаюсь создать систему предварительного просмотра изображений для аватара:

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

В моем коде свойство, вычисленное пользователем, возвращает объект JSON из vuex, который получает объект из локального расположения.

Продолжает происходить то, что когда я обновляю sh страницу, которая меняет изображение профиля, изображение по умолчанию не отображается. В chrome devtools элемент выглядит следующим образом:

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

Когда я открываю vue инструменты разработчика, щелкните компонент, в котором находится эта функция, изображение sr c добавляется:

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

Answer 1

<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: {

    }
}

Answer 2

Вы неправильно используете вычисляемое свойство avatar_path:

• Вы не должны изменять состояние в вычисляемом свойстве (вы назначаете this.avatar).
• Ничто не обращается к avatar_path для вызова. Когда вы открываете Vue инструменты разработчика, код инструментов разработчика обращается к этому свойству, чтобы можно было отобразить его в пользовательском интерфейсе данных компонента.

Лучшее исправление - изменить avatar в вычисляемое свойство, например:

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