Question

我正在为我的小组创建一个简单的网站，我用Vuetify-parallax做封面

<v-parallax dark :src='images.cover'>
  <v-row align="center" justify="center">
    <v-col class="text-center" cols="12">
    </v-col>
  </v-row>
</v-parallax>

我这样链接了默认导出图像：

export default {
      data() {
            return {
                images: {
                    cover: require('@/assets/KoroneRisu.jpg')
                }
            }
        },
    };

起初，它工作正常，但是突然，图像停止显示。如果加载速度稍慢，则会显示图像，但是在页面完全加载后，图像会消失。

这是完整的vue文件：

    <template>
  <div id="app">
    <md-toolbar md-elevation="10">
      <div class="md-toolbar-section-start">
        <router-link to="/">
          <h1 class="md-title font_title" style="">Hololike</h1>
        </router-link>
      </div>
      <div class="md-toolbar-section-end">
        <md-list-item href="https://www.facebook.com/Hololike">
          <img alt="Hololike FB" src="../assets/facebook.png" />
          <md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
        </md-list-item>

        <md-list-item
          href="https://www.youtube.com/channel/UCwq3aenbgJR1ZWLvBi2JvTA"
        >
          <img alt="Hololike YT" src="../assets/youtube.png" />
          <md-tooltip md-direction="bottom"
            >Subscrive to us on Youtube</md-tooltip
          >
        </md-list-item>
      </div>
    </md-toolbar>

    <v-parallax dark src="@/assets/KoroneRisu.jpg">
      <v-row align="center" justify="center">
        <v-col class="text-center" cols="12">
        </v-col>
      </v-row>
    </v-parallax>
  </div>
</template>

<script>
export default {
  name: "RegularToolbar",
  data() {
    return {
      images: {
        cover: require("@/assets/KoroneRisu.jpg"),
      },
    };
  },
  components: {},
  props: {
    colorOnScroll: {
      type: Number,
      default: 0,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.md-toolbar + .md-toolbar {
  margin-top: 16px;
}
.font_title {
  font-family: "Roboto";
}
.font_name {
  font-size: 72px;
  font-family: "000 Chinacat [TeddyBear]";
  color: #46c3f2;
  text-shadow: white;
  border-radius: 50%;
}
</style>

如果有人知道我做错了什么，请帮助我！

Vuejs图像未出现在Vuetify视差中

0 个答案: