img src中的流星模板不起作用

Meteor template in img src not working

本文关键字：不起作用流星 src img 更新时间：2023-09-26

我知道图像要保存在公用文件夹中，而公用文件夹不会被引用。这是我正在处理的问题，我一辈子都无法弄清楚是什么错误导致图像无法加载。

HTML:

<body>
{{>carousel}}
</body>
<template name="carousel">
    <div class="carousel">
        <span class="back">
            <a href="#">Back</a>
        </span>
        {{>carouselImages}}
        <span class="forward">
            <a href="#">Forward</a>
        </span>
    </div>
</template>
<template name="carouselImages">
    <img src="{{slide}}" height="200px" width="200px">
</template>

JavaScript:

slideNumber = 0;

if (Meteor.isClient) {
        Template.carousel.events({
                'click .back': function(){
                    if (slideNumber == 0){
                        slideNumber = 4;
                    } else {
                        slideNumber++;
                    }
                },
                'click .forward': function(){
                    if (slideNumber == 4){
                        slideNumber = 0;
                    } else {
                        slideNumber--;
                    }
                }
        });
        Template.carousel.helpers({
            slide: function(slideNumber){
                switch(slideNumber) {
                    case 0:
                            return "21.png";
                            break;
                    case 1:
                            return "bj2.png";
                            break;
                    case 2:
                            return "vp.png";
                            break;
                    case 3:
                            return "vp2.png";
                            break;
                    case 4:
                            return "vp3b.png";
                            break;
                }
            }
        });
}
if (Meteor.isServer) {
}

您试图引用全局变量（slideNumber），但提供了局部重载（slide: function(slideNumber)），并且没有在模板中为slide提供任何参数。要么删除本地参数（见下文），要么以某种方式提供is作为参数。

Template.carouselImages.helpers({
    slide: function() {
        switch(slideNumber) {
           ...
        }
    }
});