<img > v-bind:src failed to render successfully

for example, I define an empty object in the initialization data of a page

 data () {
      return {
        community: {},
      }
    },

and my tag is written

 <img class="uploadImageDiv" mode="aspectFill" :src="community.avatarUrl"/>

when I first assigned a value to community

this.community.avatarUrl = "XXXXX.png"

the reasonable img tag will render immediately, right? But it didn"t. Why?
maybe it has something to do with me defining an object? Because if I define an avatarUrl="XXXXX.png" directly in data and can render directly

Vuex mpvue vue.js javascript html

Apr.07,2022

because the attribute community.avatarUrl is not observed at all.
set

  community: {
    avatarUrl:''
    },

this.community= {avatarUrl :'XXXXX.png'}

does not render it means that you are not reasonable with vue, 1. Define the path of img's src directly in data, 2. If you want to this.community.avatarUrl this method, please see how to write the response of the new object in vue

this.$set(this.community,"avatarUrl","xxx.png")

vue does not detect the new properties of the object, or the definition number is just like the
document written upstairs.

does not render to show that you are not reasonable with vue

due to JavaScript restrictions, Vue cannot detect the addition or deletion of object attributes
correct
this.$set (this.community,'avatarUrl', 'XXXXX.png');

Thank you! Very clear!

Previous: How does vue get the height of the loaded picture?

Next: Wechat web page development, how to solve the positioning problem