title: In svelte, how to bind an async function to an attribute?
body: <p>In my code,</p>
  <p>I have an image class, the image class loads an image as a data url.</p>
  <pre><code>    class Image {
      constructor(name, file, timestamp) {
          this.name = name;
          this.file = file;
          this.timestamp = timestamp;
      }
  
      async load() {
          return new Promise((resolve, reject) =&gt; {
              const reader = new FileReader();
              reader.readAsDataURL(this.file);
              reader.onload = (readerEvent) =&gt; {
                  resolve(readerEvent.target.result);
              };
          });
      }
  }
  
  let images = []; // an array of class Image
  </code></pre>
  <p>then I want to render the images, but the image.load function doesn't seem to be called.</p>
  <pre><code>&lt;div class=&quot;navbar&quot;&gt;
      {#each images as image}
          &lt;li&gt;&lt;img bind:this={image} alt={image.name} src={image.load} /&gt;&lt;/li&gt;
      {/each}
  &lt;/div&gt;
  </code></pre>
  <p>I have tried</p>
  <p>await image.load() // this doesn't compile</p>
  <p>image.load() // this compiles, but doesn't work.</p>
  <p>they don't work</p>
  <p>this is how I initialize the array</p>
  <pre><code>function openFiles() {
      if (window.indexedDB) {
          let db = await (async () =&gt; {
              return new Promise((resolve, reject) =&gt; {
                  let request = window.indexedDB.open(&quot;DirHandle&quot;, 1);
                  request.onerror = function (event) {
                      console.log(&quot;request error: &quot;, request.errorCode);
                      reject(request.errorCode);
                  };
                  request.onsuccess = function (event) {
                      console.log(&quot;request success!&quot;);
                      let db = event.target.result;
                      db.onerror = function (event) {
                          console.log(&quot;db err:&quot;, event.target.errorCode);
                          reject(event.target.errorCode);
                      };
                      resolve(db);
                  };
                  request.onupgradeneeded = function (event) {
                      console.log(&quot;need to init&quot;);
                      let db = event.target.result;
                      let objectStore = db.createObjectStore(&quot;dir&quot;, {
                          autoIncrement: true,
                      });
                  };
              });
          })();
          var transaction = db.transaction([&quot;dir&quot;], &quot;readwrite&quot;);
          // Do something when all the data is added to the database.
          transaction.oncomplete = function (event) {
              console.log(&quot;transaction All done!&quot;);
          };
  
          transaction.onerror = function (event) {
              // Don't forget to handle errors!
              console.log(&quot;transaction error&quot;);
          };
  
          let dirStore = transaction.objectStore(&quot;dir&quot;);
          let request = dirStore.get(10);
          request.onsuccess = async function (event) {
              console.log(&quot;loaded!&quot;);
              dirhandle = request.result;
              const opts = {};
              opts.mode = &quot;readwrite&quot;;
              if ((await dirhandle.queryPermission(opts)) === &quot;granted&quot;) {
                  console.log(&quot;permission granted already&quot;);
              } else {
                  console.log(&quot;not granted already when loading&quot;);
                  try {
                      if (
                          (await dirhandle.requestPermission(opts)) ===
                          &quot;granted&quot;
                      ) {
                      } else {
                          console.log(&quot;failed to get permissions&quot;);
                      }
                  } catch (e) {
                      console.log(&quot;e&quot;, e);
                  }
              }
  
              for await (const entry of dirhandle.values()) {
                      console.log(
                          entry.kind,
                          entry.name,
                          await entry.getFile()
                      );
                      files.set(entry.name, await entry.getFile());
                  }
                  images = [];
                  files.forEach((value, key, map) =&gt; {
                      images.push(new Image(key, value, value.timestamp));
              });
          };
      }
  }
  </code></pre>