流星上破碎的图像答案

【问题标题】：images broken on meteor流星上破碎的图像
【发布时间】：2017-10-28 02:08:11
【问题描述】：

我正在做这个 Meteor 课程，其中使用了旧版本的 Meteor，但不确定将文件和文件夹放在哪里。我在我的主文件夹和以下 main.html 客户端代码中的公共文件夹中有图像

<head>
  <title>image_share</title>
 </head>
<body>
  <h1>Welcome to Coursera!</h1>

  {{>images}}

</body>

<template name="images">
    {{#each images}}
        <img src="{{img_src}}" height="100" alt="{{img_alt}}" />
    {{/each}}
</template>

以及下面的客户端代码main.js

if (Meteor.isClient) {
    console.log("I am the client");

var img_data = [
    {
        img_src:"image1.jpg",
        img_alt:"dental surgery"
    },

    {
        img_src:"image2.jpg",
        img_alt:"carribean night"
    },

    {
        img_src:"image3.jpg",
        img_alt:"full moon palm tree"
    },

];

Template.images.helpers({images:img_data});
}

我的问题是浏览器窗口中只显示 image1.jpg。

【问题讨论】：

标签： javascript arrays meteor brokenimage

【解决方案1】：

你的助手应该是函数：

Template.images.helpers({
    images:function() {
        return img_data;
    },
});

在您的模板中，最好在“this”的上下文中明确引用循环中的数据：

{{#each images}}
    <img src="{{this.img_src}}" height="100" alt="{{this.img_alt}}" />
{{/each}}

“This”这里指的是数组中的当前对象，你迭代。

【讨论】：

感谢您的反馈！进行了您建议的更改，但浏览器窗口中仍然只显示 image1。
名字是正确的，没有错别字什么的？路径正确吗？假设您的代码，图像应该在没有任何子文件夹的公用文件夹中。
双重检查，三次检查...路径和名称正确。公用文件夹而非子文件夹中的图像。
会发生什么，如果您将 <img src="{{this.img_src}}" height="100" alt="{{this.img_alt}}" /> 替换为 <div>{{this.img_src}}</div> 只是为了查看是否根据需要打印了名称。
是的，图片名称打印为image1.jpg、image2.jpg、image3.jpg