the main problem is that I can"t eliminate the blank at the beginning of this broadcast image. When the image data is obtained from api, it is obtained using axios in created. Finally, it causes the phenomenon of blank in the front paragraph.

I have compared the way I add an array of links to pictures in data, and the problem does not exist.

I"ve been thinking about it for a long time, but I don"t understand why. And look to the gods for advice.

          </a>
        </li>
      </transition-group>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      mark: 1,
      imgs: [],
      imgHeight: 0,
      timer: ""
    };
  },
  created() {
    console.log(this.imgHeight);
    this.getImgs();
  },
  mounted() {
    this.$nextTick(() => {
      this.timer = setInterval(this.autoplay, 3000);
    });
  },
  methods: {
    getImgs() {
      axios.get("http://localhost:3000/banner").then(res => {
        this.imgs = res.data.banners;
        let realWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        let img = new Image();
        img.src = res.data.banners[0].imageUrl;
        let that = this;
        img.onload = function() {
          that.imgHeight = (img.naturalHeight * realWidth) / img.naturalWidth;
        };
      });
    },
    autoplay() {
      this.markPP;
      if (this.mark === this.imgs.length) {
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoplay, 3000);
    }
  }
};