点击图片后会产生一个新的图片

Question

问题描述

使用axios获取图片并显示在界面上。在每次刷新界面后第一次点击某一张图片，界面在body标签后面会重复生成一张这个图片

问题出现的环境背景及自己尝试过哪些方法

谷歌浏览器，火狐没有这个问题。我试过删除样式，把router-link改成div(tag="li"那个)，删除img标签的父级div等等，有时有效（我怀疑卡了，多刷几次有有问题）

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<ul>
  <div
    tag="li"
    class="border-bottom"
    v-for="i of list"
    :key="i.id"
  >
    <div class="item-img-wrap">
      <img :src="i.imgUrl" class="item-img" alt="" />
    </div>
    <div class="item-info">
      <p class="item-title">{{ i.title }}</p>
      <p class="item-desc">{{ i.description }}</p>
    </div>
  </div>
</ul>

.item-img-wrap
    overflow: hidden
    height: 0
    padding-bottom: 33.5%
    .item-img
      width: 100%

你期待的结果是什么？实际看到的错误信息又是什么？

当刷新界面点击某一张图片之后：

由图可知，我并未设置监听事件。新生成的图片在body后面。当我滑动滚轮或者点击界面，或者切换标签时。图片消失不见：

新生成的图片都是消失前后block,但是长宽，消失前有具体长宽，消失后长与宽都为100%