javascript - Meteor:显示来自 aws s3 的图像

Question

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

<小时/>

方法一:通用解决方案

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

client.js

Template.newProduct.helpers({

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

template.html

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

<小时/><小时/>

方法 2 :循环每个图像获取 url 并将其放入数组中以激发 {{#each image}}

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

client.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;
    }
});

template.html

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

<小时/><小时/>

方法三:文件上传时使用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

当您说以下内容时，我认为您已经完全确定了问题:

Problem: The img tag loads with the string http://s3.amazonaws.com/etc... before {{copies.original.key}} kicks in. This shows a broken image icon while the image loads.

避免这种情况的方法是

1. 保存完整生成的图像 URL 并在模板
2. 通过模板助手生成完整的网址

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

解决方案1

template.html

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

解决方案2

template.html

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

client.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(包括存储桶名称)，因为这实际上是该图像版本的完整身份。

图像 key 只是身份的一部分，如果您依赖部分身份，您几乎总是会遇到额外的复杂性。