RecycleScroller加载图像但不显示它们-Vue.js

Question

我正在尝试使用vue-virtual-scroller软件包中的RecycleScroller从网络加载图像。当我在chrome开发者控制台中查看网络设置时，

import prevImage from "./prev-image"
import modalImage from "./modal-image"
import inPageButton from "src/components/in-page-button.vue"
import {
  RecycleScroller
} from "vue-virtual-scroller"
import _ from "lodash"
import Vue from "vue"
import remToPixel from "src/mixins/remToPixel.js"
import * as cordovaHelpers from "src/utils/cordovaHelpers"

export default {
  name: "projectAttachments",
  components: {
    prevImage,
    modalImage,
    RecycleScroller,
    inPageButton,
  },

  mixins: [remToPixel],

  computed: {
    prevImageWidth() {
      return this.emToPixel(14)
    },

    imagesPerRow() {
      const containerWidth = this.elementWidth -
        this.emToPixel(1) -
        this.emToPixel(1)
      return Math.max(0, Math.floor(containerWidth / this.prevImageWidth))
    },

    attachmentIdsInProject() {
      const project = this.$store.getters["project/get"][this.projectId]
      const protocoldict = this.$store.getters["protocol/get"]
      const protocolentrydict = this.$store.getters["protocolentry/get"]
      const protocolentrychatdict = this.$store.getters["protocolentrychat/get"]
      const entries = (project.protocols
        .reduce((acc, id) => acc.concat(protocoldict[id].entries), [])
        .map(id => protocolentrydict[id]))
      return [
        project.attachments,
        entries.reduce((acc, entry) => acc.concat(entry.attachments), []),
        (entries
          .reduce((acc, entry) => acc.concat(entry.chats), [])
          .reduce((acc, id) => acc.concat(protocolentrychatdict[id].attachments), [])),
      ]
    },

    attachmentsCount() {
      return this.attachmentIdsInProject[0].length + this.attachmentIdsInProject[1].length + this.attachmentIdsInProject[2].length
    },

    attachmentsInProjectSorted() {
      if (!this.show_attachments) {
        return []
      }
      const attachments_project = this.$store.getters["attachment-project/get"]
      const attachments_entry = this.$store.getters["attachment-entry/get"]
      const attachments_chat = this.$store.getters["attachment-chat/get"]
      return _.sortBy([
        ...this.attachmentIdsInProject[0].map(id => attachments_project[id]),
        ...this.attachmentIdsInProject[1].map(id => attachments_entry[id]),
        ...this.attachmentIdsInProject[2].map(id => attachments_chat[id]),
      ], "created_at")
    },

    show_attachments() {
      return this.attachmentsCount > 0
    },

    current_attachment() {
      return this.attachmentsInProjectSorted[this.attachment_shown] || {}
    },

    grouped_attachments() {
      const groups = _.groupBy(this.attachmentsInProjectSorted, ({
        created_at: date
      }) => {
        return date && date.slice(0, 10)
      })
      return Object.keys(groups).sort().reverse().map(key => ({
        key,
        group: groups[key]
      }))
    },

    attachment_rows() {
      var counter = 0
      const rows = []
      for (const {
          group,
          key: date
        } of this.grouped_attachments) {
        rows.push({
          id: counter,
          type: "date",
          date,
          height: this.emToPixel(4),
        })

        for (const chunk of _.chunk(group, this.imagesPerRow)) {
          rows.push({
            type: "attachments",
            attachments: chunk,
            height: this.emToPixel(22),
          })
        }
        counter++
      }
      console.log(JSON.stringify(rows))
      return rows
    },

.project_attachments {
  padding: 0 0.5em;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.no_attachments {
  padding: 1em;
}

.attachment_rows {
  flex: 1 1 auto;
}

.attachment_row {
  height: 32%;
  padding: 0 12px;
  display: flex;
  flex-flow: row nowrap;
}

.attachment {
  margin: 0 1em;
  height: 15em;
  width: 12em;
  font-size: 0.9em;
}

.date {
  margin-top: 0.75em;
  border-top: thin black solid;
  padding-top: 0.25em;
  font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template>
  <div v-if="show_attachments" class="project_attachments">
    <span v-if="chooseFile">
      <button @click="attachChosenFiles">{{ $t("button.attach_selected_files") }}</button>
    </span>

    <RecycleScroller :emit-update="true" :items="attachment_rows" sizeField="height" itemSize="100"  class="attachment_rows"  >
      <template slot-scope="{ item, index, active }">
        <div class="date" v-if="item.type === 'date'">{{ item.date | formatDate }}</div>
        <div class="attachment-row" v-else-if="item.attachments.length">
          <div class="attachment" v-for="attachment in item.attachments" v-bind:key="attachment.id">

            <prev-image @click="prev_img_click(attachment)" :key="attachment.id" :attachment="attachment" :chooseFile="chooseFile" ></prev-image>

            <inPageButton class="show-button" v-if="attachment.entry" @click="showEntry(attachment)" faname="eye" color="transparent"/>

            <inPageButton class="show-button" v-if="attachment.chat" @click="showEntry(attachment)" faname="eye" color="transparent"/>

            <inPageButton class="delete-button" :disabled="getProtocolStatus(attachment)" v-if="attachment.entry || attachment.project" @click="deleteAttachment(attachment)" faname="trash" color="transparent"/>

            <div class="file_extension" :title="getTitle(attachment)">{{ showShortenedName(getTitle(attachment)) }}</div>
          </div>
      </template>
</RecycleScroller>
</div>
</template>

 我看到滚动时已加载图像，但在视图中看不到它们。 关于这件事的笑话是，我看到的图像取决于窗户的大小。 我已经尝试过更改CSS来修复它，并在互联网上搜索了可能的解决方案，但无法解决该问题。