以angular2显示嵌入的图像

Question

我正在处理angular2中的项目，该项目涉及直接从数据库加载图像（base64编码）。在angular1中，可以按如下方式加载它：

<img data-ng-src="data:image/jpg;base64,{{entry.img}}" />

其中entry.img是原始图像数据。但是，我不知道如何在angular2中这样做。我试过了

<img [src]="data:image/jpg;base64,{{entry.img}}" />

但这不起作用，因为angular仍会尝试从网址加载图片。

Answer 1

也许你可以试试这个：

Dart SDK is not available, Dart tasks will be skipped.
[11:30:21] Using gulpfile ~\Documents\angular\gulpfile.js
[11:30:21] Starting 'build/clean.js'...
[11:30:21] Starting 'build/clean.tools'...
[11:30:21] Starting 'build/clean.dart'...
Dart SDK is not available. Skipping task: build/clean.dart
[11:30:21] Finished 'build/clean.dart' after 271 μs
[11:30:21] Starting 'build/clean.docs'...
[11:30:21] Starting 'build/clean.bundles'...
[11:30:21] Starting 'build/clean.bundles.benchpress'...
[11:30:21] Finished 'build/clean.docs' after 26 ms
[11:30:21] Finished 'build/clean.bundles' after 26 ms
[11:30:21] Finished 'build/clean.bundles.benchpress' after 26 ms
[11:30:21] Finished 'build/clean.js' after 56 ms
[11:30:21] Starting 'build.js.dev'...
[11:30:21] Finished 'build/clean.tools' after 59 ms
[11:30:21] Starting 'build.tools'...
[11:30:21] Starting '!build.tools'...
[11:30:21] Starting 'clean'...
[11:30:21] Finished 'clean' after 4.46 μs
[11:30:22] Starting '!bundle.ng.polyfills'...
[11:30:22] Starting '!bundles.js.docs'...
[11:30:22] Finished '!bundles.js.docs' after 112 ms
[11:30:22] Finished '!bundle.ng.polyfills' after 315 ms
[11:30:24] Finished '!build.tools' after 2.86 s
[11:30:24] Finished 'build.tools' after 2.86 s
[11:30:24] Starting 'broccoli.js.dev'...
[11:30:24] Starting '!broccoli.js.dev'...
[11:30:24] Starting 'build.js.prod'...
[11:30:24] Starting '!broccoli.js.prod'...
[11:30:24] Starting 'build.js.cjs'...
[11:30:24] Starting '!build.js.cjs'...

假设<img [src]="'data:image/jpg;base64,'+entry.img" /> 是组件的属性并包含entry属性。

Answer 2

我使用 CREATE TABLE session_audit ( uid uniqueidentifier not null, login_name varchar(100), login_dt datetime, session_id smallint, hostname nvarchar(128), constraint pk_session_audit primary key (uid) ) CREATE TRIGGER session_audit_trigger ON ALL SERVER FOR LOGON AS BEGIN IF SUSER_SNAME() not in ('sa') -- do not log for sa BEGIN INSERT INTO Test.dbo.session_audit (uid, login_name, login_dt, session_id, hostname) SELECT NEWID(), SUSER_SNAME(), GETDATE(), @@SPID, HOST_NAME(); END END; GO ENABLE TRIGGER session_audit_trigger ON ALL SERVER; 我的模型看起来像这样

<img [attr.src]="image.base64">

，但@Thierry的版本也有效。我附加了组件的一部分和一段HTML。也许你可以改善你的解决方案或改善我的解决方案：）

  

HTML

export class ImageModel {
    public alt:string = "";
    public name:string = "";
    public base64:string ='';
}

  

组件

<div class="row">
    <div class="col-xs-12">
        <p class="f-500 c-black m-b-20">Image Preview</p>

        <div class="fileinput fileinput-new" [ngClass]="{'fileinput-exists': fileExists(), 'fileinput-new': !fileExists()}">
            <div class="fileinput-preview thumbnail">
                <img *ngIf="fileExists()" [attr.src]="image.base64">
            </div>
            <div>
                <span class="btn btn-info btn-file">
                    <span class="fileinput-new">Select image</span>
                    <span class="fileinput-exists">Change</span>
                    <input type="file" #fileInp (change)="onFileChange($event)" name="file">
                </span>
                <a href="#" class="btn btn-danger fileinput-exists" (click)="clearImage($event)">Remove</a>
            </div>
        </div>
    </div>
</div>