【解決方法】Base64 イメージが到着します [src] ただし、Angular 2 UI ではレンダリングされません


i am binding a base64 image to the UI.which is in a loop.but image is not binding,while inspect element i can c the image but not rendering

DBが戻ってこない

data:image/jpg;base64,

だから私はhtmlに追加しました

要素を検査中に取得しています

"data:image/jpeg;base64,/9j/4A

しかし、レンダリングされません。何かアイデアはありますか????

私が試したこと:

<pre><td>
<span>{{ m.Name }}</span>
</td>
<td>
<!--<img style="width:100px;height:100px" [src]="imageData1">-->
<img [src]="'data:image/jpg;base64,'+m.ImageData" style="height:50px;width:50px" />
</td>
<td>
<span>{{m.Age }}</span>

解決策 1

使用 _sanitizer.bypassSecurityTrustUrl 角度の src 値が安全であることを伝える

以下のようにコードを変更できます。

DomSanitizer をインポートする

import { DomSanitizer } from '@angular/platform-browser';

この依存関係をコンストラクターに注入します

constructor(private domSanitizer: DomSanitizer) { }
myReader.onloadend = (e) => {
     this.base64Image = domSanitizer.bypassSecurityTrustUrl(myReader.result);
     console.log(this.base64Image);
   }

解決策 2

//Yes, /9j/4A decodes to the JPEG header ÿØÿà, but the rest of the binary data in the Base64 string is likely different. When a browser decodes the Base64 image data URL, it is expecting a proper JPEG image format with a valid header and no corruption. If the Base64 string contains binary data that does not correspond to a proper JPEG, the decoding will likely fail or result in a corrupted image or a blank page.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:32px;height:32px;' id='codeproject'
       src='data:image/jpeg;base64, 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' />
  </body>
</html>

コメント

タイトルとURLをコピーしました