大きなオブジェクト（base64エンコードされた画像）でdom-repeatが動作しません

私は非常に大きなbase64でエンコードされた画像を含むimgUrlキーを持つオブジェクトのリストを使ってdom-repeatを生成しています。大きなオブジェクト（base64エンコードされた画像）でdom-repeatが動作しません

ただし、dom-repeatをこのように生成すると、各アイテムは定義されません。これは、オブジェクトが大きすぎてdom-repeatをレンダリングするときに読み込むことができないためと考えられます。

ここに問題を示すスニペットがあります。

<template is="dom-repeat" items="{{myitems}}"> 
    <p>{{item.name}}</p> 
    <img src="[[item.imgUrl]]"/> 
</template> 

<script> 
    // ... 

    // Doesn't work: 
    var list = []; 
    myobj = { 
    name: "Hello", 
    imgUrl: " /*BASE64 string here*/ " 
    } 
    list.push(myobj); 
    this.set('myitems', list); 

    //Works: 

    var list = []; 
    myobj = { 
    name: "Hello", 
    imgUrl: "" 
    } 
    list.push(myobj); 
    this.set('myitems', list); 

    // ... 

</script>

base64の画像全体がロードされていることがわかるまで、ドンリピートしないでください。（どうすれば）この問題を解決できますか？

出典

2017-06-28 Toivo Säwén

動作しない理由はありません。

<!doctype html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+1.7.1/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 

 
    <script> 
 
    // Setup Polymer options 
 
    window.Polymer = { 
 
     dom: 'shadow' 
 
    }; 
 
    </script> 
 

 
    <link rel="import" href="polymer/polymer.html"> 
 
</head> 
 

 
<body> 
 

 
    <my-elem></my-elem> 
 

 
    <dom-module id="my-elem"> 
 
    <template> 
 

 
     <template is="dom-repeat" items="{{myitems}}"> 
 
     <p>{{item.name}}</p> 
 
     <img src$="[[item.imgUrl]]" /> 
 
     </template> 
 

 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     is: 'my-elem', 
 

 
     ready: function() { 
 
      var list = []; 
 
      var myobj = { 
 
      name: "Hello", 
 
      imgUrl: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" 
 
      }; 
 
      list.push(myobj); 
 

 
      var myobj2 = { 
 
      name: "Hello2", 
 
      imgUrl: "data:image/gif;base64,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" 
 
      }; 
 

 
      list.push(myobj2); 
 

 
      this.set('myitems', list); 
 
     } 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
</body>

出典

2017-06-28 10:20:36 Sohaib

以下のスニペットを試してみてくださいおかげで、はい、これは動作しますが、base64文字列は非常に小さいです。この問題は、base64文字列自体ではなく、非常に大きな画像を持つことで起こります。私は、base64文字列全体が読み込まれるまで、dom-repeatをレンダリングしないように強制する何らかの読み込み機構を追加したいと思います。 –

2番目の画像が十分に大きいようです。とにかく、巨大な画像のためにbase64を使うべきではありません。 – Sohaib

大きなオブジェクト（base64エンコードされた画像）でdom-repeatが動作しません

答えて

関連する問題