流星:显示来自 aws s3 的图像

Question

在流星应用程序中，从 aws s3 获取图像的最佳方法是什么？我已经尝试了三种方法，但都有问题。

---

方法1：通用解决方案

问题：img 标记在启动之前加载字符串http://s3.amazonaws.com/etc... {{copies.original.key}}。这将在图像加载时显示损坏的图像图标。

客户端.js

Template.newProduct.helpers({
    'image': function(){
        newImages = // logic here; 
        return Images.find({'_id':{'$in':newImages}});
    }
});

模板.html

<template name="newProduct">
  {{#each image}}
    <img src="http://s3.amazonaws.com/etc...{{copies.original.key}}">
  {{/each}}    
</template>

---

---

方法2：遍历每个图像获取url并将其放在数组中以引起{{#each image}}

问题：每当添加图像时，此函数都会再次运行，并且必须重新加载图像。在更新时导致长时间闪烁。我只想加载新图像。

客户端.js

Template.newProduct.helpers({
    'image': function(){
        newImages = // logic here; 
        x = Images.find({'_id':{'$in':newImages}});
        var returnArray = [];
          for(i=0;i<x.count();i++){
            stringResult = "http://s3.amazonaws.com/etc..." + x.fetch()[i].copies.original.key;
            returnArray.push(stringResult);
          }
        return returnArray;
    }
});

模板.html

<template name="newProduct">
    {{#each image}}
        <img src="{{this}}">
    {{/each}}
</template>

---

---

方法3：在文件上传时使用js构建图像标签并将其添加到页面中。

问题：当您以这种方式从其他网站加载图像时，会导致 403（禁止）错误。您无法即时加载此类图像。

'change .in': function(ev, t) {
     FS.Utility.eachFile(ev, function(file) {
          Images.insert(file, function (e,f) {
            if (!e){ 
              $('#imageShack').append($('<img />').attr('src', 'http://s3.amazonaws.com/etc..' + f._id + '-' + f.original.name));
            }
          });
     });
}

Answer 1

我认为当你说：

问题：img 标记加载字符串 http://s3.amazonaws.com/etc...在 {{copyies.original.key}} 启动之前。这将在图像加载时显示损坏的图像图标。

避免这种情况的方法是

1. 要保存完整的生成图像 url 并将其用于模板
2. 通过模板帮助程序生成完整的 URL

这两种解决方案都将解决您的问题，因为它们以完整且完整的形式提供 URL。

解决方案 1

模板.html

<template name="newProduct">
  {{#each image}}
    <img src="{{copies.original.s3Url}}">
  {{/each}}    
</template>

解决方案 2

模板.html

<template name="newProduct">
  {{#each image}}
    <img src="{{getImageUrl copies.original.key}}">
  {{/each}}    
</template>

客户端.js

Template.newProduct.helpers({
    'image': function(){
       newImages = // logic here; 
       return Images.find({'_id':{'$in':newImages}});
    }
    'getImageUrl': function(key){
        return 'http://s3.amazonaws.com/etc...' + key;
    }
});

就个人而言，我倾向于解决方案#1。

当我将图像上传到 s3 时，我会存储完整的 URL（包括存储桶名称），因为这实际上是该图像版本的完整身份。

图像密钥只是标识的一部分，如果您依赖部分标识，则几乎总是会增加复杂性。