изображения разбиты на метеоре

Я провожу этот курс 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
person Chris Carr    schedule 27.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вашими помощниками должны быть функции:

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

И в вашем шаблоне хорошо явно ссылаться на данные в цикле в контексте «этого»:

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

«Это» относится здесь к текущему объекту в массиве, который вы выполняете итерацию.

person Jankapunkt    schedule 27.05.2017
comment
Спасибо за ответ! Внесены изменения, которые вы посоветовали, но в окне браузера по-прежнему отображается только изображение1. - person Chris Carr; 27.05.2017
comment
Имена правильные, без опечаток или что-то в этом роде? Пути правильные? Предполагая ваш код, изображения должны находиться в общей папке без каких-либо подпапок. - person Jankapunkt; 27.05.2017
comment
Дважды проверено, проверено трижды... путь и имена верны. Изображения в общей папке, а не в подпапке. - person Chris Carr; 27.05.2017
comment
Что произойдет, если вы замените <img src="{{this.img_src}}" height="100" alt="{{this.img_alt}}" /> на <div>{{this.img_src}}</div> только для того, чтобы увидеть, напечатаны ли имена, как нужно. - person Jankapunkt; 27.05.2017
comment
Да, имена изображений печатаются как image1.jpg, image2.jpg, image3.jpg - person Chris Carr; 27.05.2017
comment
Так что это скорее проблема html или проблема самих изображений. Что произойдет, если вы измените свой img на <img src="{{this.img_src}}" alt="{{this.img_alt}}" /><br>? - person Jankapunkt; 27.05.2017
comment
добавление ‹br› помещает каждое изображение на новую строку. Как вы думаете, изображения слишком высокого разрешения? Я загрузил изображение из Интернета, и оно показывает это изображение, но не image2 и image3. - person Chris Carr; 27.05.2017
comment
Что произойдет, если поставить / перед путем src? нравится <img src="/{{this.img_src}}" /> - person tomsp; 27.05.2017