时间戳

首页 > 解决方案 > Vuejs Image 出现然后消失

vue.js - Vuejs Image 出现然后消失

问题描述

我正在为我的小组制作一个简单的网站，我使用 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>

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

标签： vue.jsvue-material

解决方案

“vue-parallaxy” 2 年前的最后一次更改......这个包似乎被遗弃了

  • 它有一个内部错误，它在 beforeCreate 钩子中使用文档。

  • 它不尊重 vue 组件名称约定。一个包应该有两个单词和小写的名称

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

推荐阅读