Vuejs 绑定到 img src 仅适用于组件重新渲染答案

【问题标题】：Vuejs binding to img src only works on component rerenderVuejs 绑定到 img src 仅适用于组件重新渲染
【发布时间】：2020-02-28 08:43:49
【问题描述】：

我有一个组件，让用户在将其发送到 cloudinary 之前上传带有预览的个人资料图片。

<template>
<div>
    <div
        class="image-input"
        :style="{ 'background-image': `url(${person.personData.imagePreview})` } "
        @click="chooseImage"
    >
        <span
            v-if="!person.personData.imagePreview"
            class="placeholder"
        >
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </span>
        <input
            type="file"
            ref="fileInput"
            @change="previewImage"
        >
    </div>
  </div>
</template>

处理预览的方法：

chooseImage() {
    this.$refs.fileInput.click()
},
previewImage(event) {
            // Reference to the DOM input element
            const input = event.target;
            const files = input.files

            console.log("File: ", input.files)

            if (input.files && input.files[0]) {
                this.person.personData.image = files[0];

                const reader = new FileReader();

            reader.onload = (e) => {
                this.person.personData.imagePreview = e.target.result;
                }
                // Start the reader job - read file as a data url (base64 format)
                reader.readAsDataURL(input.files[0]);
            }
        },

这很好用，除非用户从数据库中获取以前的项目。 this.person.personData.imagePreview 被设置为 https://res.cloudinary.com/resumecloud/image/upload/.....id.jpg 这样当用户想要更改他的头像时，他可以从他的本地文件系统中选择一个新的，this.person.personData.imagePreview 被再次读取为 base64 格式的数据 url .但是预览不起作用。只有当我来回更改路线时，才会显示用户选择的正确图像。

【问题讨论】：

由于您的嵌套对象，可能是反应性问题。看看vuejs.org/v2/guide/reactivity.html（特别是Vue.set...）看看是否有帮助，如果没有，我们需要更多帮助你，也许你可以在codesandbox/jsfiddle上展示这个问题。
听起来你的组件在图片被检索之前正在加载，你可以在它上面放一个v-if或者在它到达后强制重新渲染。
哇，我真的在 1 秒前解决了这个愚蠢的错误。原来我是个白痴。显示预览时，我使用了 this.person.personData.imagePreview 。当用户从数据库中获取项目时，我只是做了this.person.personData = response.data。这很好用，除了我在后端有一个不同的imagePreview 名称。所以我在从数据库中获取时手动将其设置为相同的load 方法：this.person.personData.imagePreview = this.loadedPersonData.file。出于某种原因，这与 Vue 的反应性不符。感谢 cmets 伙计们，绝对有帮助

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

就像我在帖子的评论中所说的那样。原来我是个白痴。显示预览时，我使用了 this.person.personData.imagePreview 。当用户从数据库中获取项目时，我只是做了this.person.personData = response.data。这很好用，除了我在后端有一个不同的imagePreview 名称。所以我在从数据库中获取时手动将其设置为相同的加载方法：this.person.personData.imagePreview = this.loadedPersonData.file。出于某种原因，这与 Vue 的反应性有关。

【讨论】：