質問: this.result; } ``` というコードを書いてみましたが、返ってくるdataUrlはどうやら正しくないようで、imgタグの画像が存在しないときに表示されるアイコンが表示されています。 このような書き方では上手く行かないのでしょうか。 いくつかのサイトを見てみましたが、私のような状況に陥っている方を見つけられず、質問させていただきます。
回答: 自己解決致しました。 一度strに変換しているのは、その時点でFileReaderを用いて非同期処理を入れるとコードが複雑になるため行っておりましたが、FileReaderを継承した独自FileReaderクラスを作成することで解決できました。 ``` export class MyFileReader extends FileReader { constructor() { super(); } public readAsDataURL(blob: Blob): Promise { return this.readAs(blob, 'readAsDataURL'); } private readAs(blob: Blob, callback: string): Promise { return new Promise((resolve, reject) => { super.addEventListener('load', ({target}) => { resolve(target!.result); }); super.addEventListener('error', ({target}) => { reject(target!.error); }); // @ts-ignore supercallback; }); } } const str = await new MyFileReader().readAsDataURL(blob) as string; document.getElementById('imageElement').src = str; ```