Question

在我的程序中，我从api中检索到图像。图像路径可能有效或无效。在下面的设计中，如果代码返回未找到的图像，则代码将中断。

我想返回一个默认图像，如果在url中找不到图像，则称为default-image.jpg http://image.tmdb.org/t/p/w185 {{movie.poster_path}}。 default-image.jpg文件位于资产文件夹中。

app.component.html

<div class="table">
    <div class="box" *ngFor="let movie of _movieArray; let i = index">
        <div class="img"><img src="http://image.tmdb.org/t/p/w185{{movie.poster_path}}" (error)="updateUrl($event)"></div>
        <br>
        <div class="title">{{movie.title}}</div>
        <br>
        <div class="overview">{{movie.overview}}</div>
        <br><br>
    </div>
</div>

app.component.ts

updateUrl() {
    // need to update the src here, but I don't know how.
}

Answer 1

我知道了。答案比我想的要简单得多。

<div class="table">
    <div class="box" *ngFor="let movie of _movieArray; let i = index">
        <div class="img"><img src="http://image.tmdb.org/t/p/w185{{movie.poster_path}}" onError="this.src='assets/default-image.jpg'"></div>
        <br>
        <div class="title">{{movie.title}}</div>
        <br>
        <div class="overview">{{movie.overview}}</div>
        <br><br>
    </div>
</div>

角度：渲染图像（如果可用）。否则渲染默认图像

1 个答案: