内容（图片）未显示在模式组件vuejs2

Question

我在vue和前端方面是相当新的。我创建了一个组件来显示和喜欢/不喜欢图片。我计划在主应用程序视图和模态中使用它，以显示用户喜欢的视图。在两种情况下，我都使用完全相同的代码，但是模式上没有任何显示。我可以看到带有图片的设置是从主应用程序传递到模态的，但是这些图片不可见。这是我的代码。这可能是一个愚蠢的错误，但是我没有人要问。

Shibe.vue（图片组件）

<template>
  <div >
    <div>
      <img :src="shibe">
    </div>
    <div v-bind:class="{ liked : isFavoured }">
      <button type="button" class="btn btn-danger"
              @click="addToFavourites(shibe, $emit('liked', shibe))"
              >
        <font-awesome-icon icon="thumbs-up"/>
      </button>
      <button type="button" class="btn btn-dark"
              @click="removeFromFavourites(shibe, $emit('unliked', shibe))"
              style="float: right">
        <font-awesome-icon icon="thumbs-down"/>
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "shibe",
    props: {
      favoured: {default: false},
      shibe: '',
    },

    data: function () {
      return {
        isFavoured: false,
        modal: false,
      }
    },

    mounted() {
      this.isFavoured = this.favoured;
    },

    methods: {
      addToFavourites() {
        this.isFavoured = true;
      },

      removeFromFavourites() {
        this.isFavoured = false;
      }
    },
  }
</script>

<style lang="scss">
  /* Optional Styles */

  .header {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 10%;
    height: 20px;
    text-align: right;
  }

  .liked {
    background: firebrick;
  }
</style>

App.vue

<template>

  <div id="app">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">
        <button type="button" class="btn btn-primary" @click="showModal()">
        Favourites
      </button>
      </span>
    </nav>
    <div class="doge" v-for="shibe in shibes">
      <shibe :shibe=shibe @liked="addToFavourited" @unliked="removeFromFavourited"></shibe>
    </div>
    <favs :favourites=favouriteShibes
          v-show="isModalVisible"
          @close="closeModal"></favs>
  </div>
</template>

<script>

  import axios from 'axios';
  import 'bootstrap/dist/css/bootstrap.css';
  import Favs from "./Favs";
  import Shibe from "./Shibe";


  export default {

    name: 'app',
    components: {Favs, Shibe},
    data() {
      return {
        shibes: new Set(),
        favouriteShibes: new Set(),
        isModalVisible: false,
      }
    },


    methods: {
      getInitialShibes() {
        axios.get(`http://shibe.online/api/shibes?count=12`)
          .then(response => {
            this.shibes = response.data;
          });
      },

      addToFavourited(shibe) {
        this.favouriteShibes.add(shibe);
        console.log(this.favouriteShibes);
      },
      removeFromFavourited(shibe) {
        this.favouriteShibes.delete(shibe);
        console.log(this.favouriteShibes);
      },

      scroll() {
        window.onscroll = () => {
          let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

          if (bottomOfWindow) {
            for (let i = 0; i < 4; i++) {
              axios.get(`http://shibe.online/api/shibes?count=1`)
                .then(response => {
                  this.shibes.push(response.data);
                });
            }
          }
        }
      },

      showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    },

    mounted() {
      this.scroll();
    },

    beforeMount() {
      this.getInitialShibes();
    }
  }
</script>

<style lang="scss">
  
  .header {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 10%;
    height: 20px;
    text-align: right;
  }

  .doge {
    border-radius: 2px;
    width: 25%;
    height: 20%;
    margin: 0 auto 15px auto;
    padding: 15px;
    display: inline-block;
    flex-wrap: wrap;

    img {
      width: 100%;
      height: 100%;
      border-radius: 2px;
    }
  }

  .doge-div {
    width: 25%;
    align-items: center;
  }
</style>

Favs.vue（模块组件）

<template>

  <div class="modal-backdrop">
    <div class="modal">
      <header class="modal-header">
        <slot name="header">
          <button @click="console()">Favourite shibes
          </button>
          <button
            type="button"
            class="btn-close"
            @click="close"
          >
            x
          </button>
        </slot>
      </header>
      <section class="modal-body">
        <slot>
          <div class="doge" v-for="shibe in favourites">
            <shibe :shibe=shibe></shibe>
          </div>
        </slot>
      </section>
    </div>
  </div>


</template>

<script>

  import Shibe from "./Shibe";

  export default {
    name: "favs",

    components: {Shibe},

    props: {
      favourites: {},
    },

    methods: {
      close() {
        this.$emit('close');
      },

      console() {
        console.log(this.favourites);
      }
    },
  }
</script>

<style lang="scss">
  .modal-backdrop {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal {
    background: #FFFFFF;
    box-shadow: 2px 2px 20px 1px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
  }

  .modal-header,
  .modal-footer {
    padding: 15px;
    display: flex;
  }

  .modal-header {
    border-bottom: 1px solid #eeeeee;
    color: #4AAE9B;
    justify-content: space-between;
  }

  .modal-body {
    position: relative;
    padding: 20px 10px;
  }

  .btn-close {
    border: none;
    font-size: 20px;
    padding: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #4AAE9B;
    background: transparent;
  }
</style>