Question

我想将 Jssor滑块与Firebase存储结合使用，以显示存储在滑块中Firebase存储中的图像。我的方法是获取每张图片的URL，并通过document.getElementByID("myImage").src = URL设置每张图片的来源。所有这些都可以检出。

在滑块初始化功能中，如果我仅通过将document.getElementByID("myImage").src = "*urltoimage*"放置在某个位置来将URL硬编码为图像，则图像将显示在滑块中。

但是，如果我使用

auth.onAuthStateChanged(user => {
    if (user) {
        var filename = firebase.auth().currentUser.uid + '/stockPic.jpg'
        var storage = firebase.storage().ref(filename);

        //get file url
        storage
            .getDownloadURL()
            .then(function(url) {
                console.log(url)
                document.getElementById("myImg").src = url;
            })
            .catch(function(error) {
                console.log("error encountered");
            });
    } else {
        //   setupUI()
        //   setupGuides([])
    }
})

没有图像。

我稍微修改了滑块的html代码，并为第一张图片提供了ID：

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:480px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
    <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
    <div> 
        <img id="myImg" data-u="image">
        <img data-u="thumb" src="../img/stockPic.jpg" />
    </div>
    <div>
        <img data-u="image" src="../img/stockPic2.jpg" />
        <img data-u="thumb" src="../img/stockPic2.jpg" />
    </div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
    <div data-u="slides">
        <div data-u="prototype" class="p" style="width:190px;height:84px;">
            <div data-u="thumbnailtemplate" class="t"></div>
            <svg viewBox="0 0 16000 16000" class="cv">
                <circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
                <line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
                <line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
            </svg>
        </div>
    </div>
</div>

有趣的是，将<img id="myImg" data-u="image">放在jssor_1 div之外时，图像可以正确显示（在滑块外部）。

我非常感谢您的帮助！

谢谢，最高

将动态内容加载到jssor滑块

0 个答案: