Programim dhe zhvillim, javascript, python, php, html

Meteor: Duke shfaqur imazhe nga aws s3

Në një aplikacion meteor cila është mënyra më e mirë për të marrë imazhe nga aws s3? Kam provuar tre mënyra, por të gjitha kanë probleme.


Metoda 1: Zgjidhje e zakonshme

Problemi: Etiketa img ngarkohet me vargun http://s3.amazonaws.com/etc... përpara se të futet {{copies.original.key}}. Kjo tregon një ikonë të thyer të imazhit ndërsa imazhi ngarkohet.

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>


Metoda 2: Lloko mbi çdo imazh, merrni url-në dhe shërbejeni atë në një grup për të ndezur {{#each image}}

Problemi: Sa herë që shtohet një imazh, ky funksion ekzekutohet përsëri dhe imazhet duhet të ringarkohen. Duke shkaktuar një dridhje të gjatë ndërsa përditësohet. Unë vetëm dua të ngarkoj imazhin e ri.

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>


Metoda 3: Gjatë ngarkimit të skedarit përdorni js për të ndërtuar një etiketë imazhi dhe për ta shtuar atë në faqe.

Problemi: Kur ngarkoni imazhe nga një uebsajt tjetër në këtë mënyrë, shkakton një gabim 403 (të ndaluar). Ju nuk mund të ngarkoni imazhe të tilla në fluturim.

'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));
            }
          });
     });
}

  • Në metodën 1, si duket URL-ja aktuale e imazhit në burimin e dhënë në shfletues? Nëse tregon një ikonë të thyer të imazhit, atëherë shikoni URL-në që po krijohet dhe shikoni se cili është problemi. 20.01.2016
  • jo ajo ngarkon src=s3.amazonaws.com/etc...{{stuff}} së pari si një ikonë e thyer. pastaj përditësohet, dhe shfletuesi shkon dhe merr imazhin, por gjatë gjithë kohës lidhja është e prishur @MarkB 20.01.2016
  • Duket se doni të prisni që abonimi të jetë gati përpara se ai ndihmës të ekzekutohet. 20.01.2016

Përgjigjet:


1

Unë mendoj se e keni identifikuar plotësisht problemin kur thoni:

Problemi: Etiketa img ngarkohet me vargun http://s3.amazonaws.com/etc... përpara se të futet {{copies.original.key}}. Kjo tregon një ikonë imazhi të thyer ndërsa imazhi ngarkohet.

Mënyra për të shmangur këtë është ose

  1. Për të ruajtur url-në e plotë të imazhit të krijuar dhe thjesht përdorni këtë në shabllon
  2. Për të gjeneruar url-në e plotë përmes një ndihmësi shabllon

Të dyja këto zgjidhje do ta rregullojnë problemin tuaj sepse ato e dorëzojnë url-në në formën e saj të plotë dhe të pandërprerë.

Zgjidhja 1

template.html

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

Zgjidhja 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;
    }
});

Personalisht do të preferoja zgjidhjen #1.

Kur ngarkoj imazhe në s3, ruaj url-në e plotë (duke përfshirë emrin e kovës) pasi ky është, në fakt, identiteti i plotë i atij versioni të imazhit.

Tasti i imazhit është vetëm një pjesë e identitetit dhe nëse mbështeteni në një identitet të pjesshëm, pothuajse gjithmonë do të përfundoni me kompleksitet shtesë.

20.01.2016
Materiale të reja

Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..

Faketojeni derisa ta arrini me të dhënat false
A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...

Si të përdorni kërkesën API në Python
Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..

Një udhëzues hap pas hapi për të zotëruar React
Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..

AI dhe Psikologjia — Pjesa 2
Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..

Esencialet e punës ditore të kodit tim VS
Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..

Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..