Vuejs 图像出现然后消失

Question

我正在为我的小组制作一个简单的网站，我使用 vue-parallaxy

制作了封面

<div style="position: relative;">
      <parallax :fixed="true">
        <img :src="images.cover" height="720px"/>
      </parallax>
</div>

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

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

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

这是完整的 vue 文件：

<template>
  <div id="app">
    <md-toolbar md-elevation="0">
      <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>

    <div style="position: relative;">
      <parallax :fixed="true">
        <img :src="images.cover" height="720px"/>
      </parallax>
    </div>
  </div>
</template>

<script>
import Parallax from "vue-parallaxy";

export default {
  name: "RegularToolbar",
  data() {
        return {
            images: {
                cover: require('@/assets/Korone_chase_Risu.jpg')
            }
        }
    },
  components: {
    Parallax,
  },
  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%;
}
.bottom-gradient {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    transparent 72px
  );
}
</style>

如果有人知道我哪里做错了请帮帮我！

Answer 1

"vue-parallaxy" 2 年前的最后一次更改...包裹似乎被遗弃了

它有一个内部错误，它在 beforeCreate 挂钩中使用了文档。
它不遵守 vue 组件命名约定。一个包应该有一个名字 in 两个单词和小写

你以后可能会有不好的惊喜。我建议你离开这个包并搜索另一种方法来做视差。

Vuejs 图像出现然后消失

Vuejs Image appears and then disappears

vue.js

vue-material