在流星上實現視差初始化

Question

我正在使用materializecss作為我當前正在開發的個人網站的前端框架。 我使用了他們的入門視差模板，並且一切正常，但是由於某些原因，我的視差圖像未顯示。 我相信這與初始化有關。

HTML視差之一的代碼段：

<template name="parall">
    <div class="parallax"><img src="/public/background1.jpg">
    </div>
</template>

JS：

if (Meteor.isClient) {
    Template.parall.onRendered(function(){
        $(".parallax").parallax();
    });
}

if (Meteor.isServer) {
    Meteor.startup(function () {
        // code to run on server at startup
    });
}

Answer 1

您是否嘗試過使用CSS渲染圖像？

.parallax {
 background-image: url("/background1.jpg");
}

Answer 2

只需嘗試從img src中刪除“ public”，然后使用“ /background1.jpg”即可。 [假設“公共”目錄在您的路線項目文件夾中）。

訪問存儲在公共目錄中的資源時，不必指定“公共”。 它是流星結構中為數不多的保留目錄名稱之一。

Answer 3

將div.parallax包裹在div.parallax-container中

Answer 4

如前所述，將div包裹在視差容器中

<div class="parallax-container">
    <div class="parallax"><img src="/images/parallax1.jpg"></div>
</div>

並在CSS中添加以下內容

.parallax{
    position:static!important 
}