bixi/packages/core/image/demo/simple.md

企业级中后台前端解决方案

---
title:
  zh-CN: bixi-safe-src
  en-US: bixi-safe-src
order: 0
---

## zh-CN

该指令支持你安全的显示一张图片，当图片加载失败时会自动替换成另外一张备用图片

## en-US
该指令支持你安全的显示一张图片，当图片加载失败时会自动替换成另外一张备用图片

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'bixi-safe-src-demo',
  template: `
  <div>
    <button nz-button (click)="changeSrc()">变更图片</button>
    <button nz-button (click)="setSrc404()">设置为错误图片</button>
    <br><br>
    <img [bixiSafeSrc]="src" bixiErrorSrc="./assets/img/404.jpg">
  </div>
  `,
  styles: [`
    img {
      max-width: 400px;
    }
  `]
})
export class BixiSafeSrcDemoComponent {
  small = './assets/img/logo.png';
  large = './assets/img/infra.jpeg';
  src = this.small;

  changeSrc() {
    this.src = this.src === this.small ? this.large : this.small;
  }

  setSrc404() {
    this.src = './ss.png';
  }
}
```