Search code examples
vue.jsvue-material

Vuejs Image appears and then disappears

I'm making a simple website for my group, I made the cover using vue-parallaxy

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

I linked the image from export default like this:

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

At first, it was working normally, but suddenly, the image stopped showing. If it's loading a little slow, the image appears, but after the page fully loaded, the image disappears.

Here's the full vue file:

<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>

If anyone knows where I did wrong please help me!

Solution

  • "vue-parallaxy" last change 2 years before... the package seems abandoned

    • It has an internal bug, it use document inside beforeCreate hook.

    • It not respect the vue components name convention. A package should has a name in two words and in lower-case

    you may have bad surprises in the future. I recomend you left this package and search another way to do parallax.