v-img dynamic：src在移动设备上显示不正确的图像

Question

我正在创建图片库，并且可以在任何台式机上正常工作。我遇到的问题是，在移动设备上，v-img组件显示的卡图像不正确。相反，它为所有卡显示相同的图像，直到您单击/轻按该卡以调出img-modal，这时它会显示您单击/轻击的卡的实际图像。

期望的行为：

移动端行为：

以下是组件（Home.vue）：

<template>
  <v-layout mt-4 style="height: 90vh;">
    <v-flex xs12 sm10 offset-sm1>
      <img-modal :src="selectedImage"></img-modal>
      <v-card id="card" :color="getColor()">
        <v-card-actions>
          <v-select :items="items"
                    v-model="size"
                    label="Size"
                    :dark="theme === 'dark'">
          </v-select>
          <v-spacer></v-spacer>
        </v-card-actions>
        <v-container v-bind="{ [`grid-list-${size}`]: true }" fluid>
          <v-layout row wrap>
            <v-flex
                v-for="(item, index) in list"
                :key="index"
                xs4>
              <v-card flat tile>
                <v-img class="cardImg"
                       :src="item.url"
                       @click="openImgDialog(item.url)"
                       height="180px">
                </v-img>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
// @ is an alias to /src
import ImgModal from '../components/ImgModal';
import { themeMixin } from "../mixins/themeMixin.js";

export default {
  name: "home",
  mixins: [themeMixin],
  components: { ImgModal },
  computed: {
    imgDialog: {
      get: function() {
        return this.$store.getters.imgDialog;
      },
      set: function() {
        this.$store.commit("imgDialog");
      }
    }
  },
  data: () => ({
    selectedImage: null,
    size: "sm",
    items: [
      { text: "Extra small (2px)", value: "xs" },
      { text: "Small (4px)", value: "sm" },
      { text: "Medium (8px)", value: "md" },
      { text: "Large (16px)", value: "lg" },
      { text: "Extra large (24px)", value: "xl" }
    ],
    list: []
  }),
  created() {
    for(let i = 0; i < 9; i++) {
      this.list.push({url: `https://source.unsplash.com/random/800x600?image=${Math.floor(Math.random() * 100) + 1}`});
    }
  },
  methods: {
    getColor() {
      return this.theme === "dark" ? "#242424" : "#f2f2f2";
    },
    openImgDialog(url) {
      this.selectedImage = url;
      this.$store.commit("imgDialog", true);
    }
  }
};
</script>

<style scoped>
  .cardImg {
    transition: transform .2s;
  }
  .cardImg:hover {
    z-index: 99;
    transform: scale(1.25);
  }
</style>

以下是ImgModal.vue组件：

<template>
  <v-dialog v-model="imgDialog">
    <v-card tile flat :class="theme" :color="getColor()">
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary"
               flat
               @click="closeDialog">
          <v-icon :color="theme === 'dark' ? '#f2f2f2' : '#4e4e4e'">mdi-close</v-icon>
        </v-btn>
      </v-card-actions>

      <v-divider></v-divider>
      <div style='background-color: #0c0c0c;'>
        <v-img :src="getImg()" contain height='70vh'></v-img>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>

  export default {
    name     : 'ImgModal',
    props    : [ 'src' ],
    computed : {
      imgDialog : {
        get : function () {
          return this.$store.getters.imgDialog;
        },
        set : function () {
          this.$store.commit( 'imgDialog' );
        }
      },
      theme : {
        get : function () {
          return this.$store.getters.theme;
        },
        set : function () {
          this.$store.commit( 'theme' );
        }
      }
    },
    methods  : {
      closeDialog : function () {
        this.$store.commit( 'imgDialog', false );
      },
      getColor () {
        return this.theme === 'dark' ? '#242424' : '#f2f2f2';
      },
      getImg      : function () {
        return this.src === null ? '' : this.src;
      }
    }
  };
</script>

<style scoped>

</style>

如何解决移动版本无法正确显示图像的问题？