Vue JS - Как отобразить изображение с динамическим URL без ошибки?

Question

Когда я пытаюсь показать изображение с динамическим URL-адресом, которое изначально исходит из вызова API, я получаю сообщение об ошибке в консоли.Через несколько секунд изображение загружается.Есть ли способ предотвратить эту ошибку?Я использую beforeCreate hook для вызова API.Любая помощь будет оценена.

HTML

<img :src="userAvatarURL" class="img-fluid avatar">

Javascript

export default {
    beforeCreate() {
        this.$store.dispatch('getUser');
    },
    computed: {
        ...mapState({
            user: 'user',
        }),
        userAvatarURL: {
            get: function () {
                return window.axios.defaults.baseURL+'/storage/user_avatars/'+this.user.avatar;
            }
        }
    }

Ошибка в сетевой вкладке консоли

GET http://api.aaa/storage/user_avatars/undefined 404 (Not Found)

Answer 1

Вы должны просто отобразить это изображение, когда определено user.avatar, например:

<img v-if="user.avatar" :src="userAvatarURL" class="img-fluid avatar">