angular响应图像组件

angular响应图像组件
插件名称 angular-mm-responsive-image
发布时间 2020年6月3日
插件作者 mediamanDE

一个简单,方便的Angular响应式图像组件,基于HTML5  图片元素

安装:

# Yarn
$ yarn add mm-responsive-image

# NPM
$ npm install mm-responsive-image --save

使用:

要使用该mm-responsive-image组件,请将其添加到您的AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the component
import { MmResponsiveImageComponent } from 'mm-responsive-image';

@NgModule({
  declarations: [
    AppComponent,

    // Specify your component as an declaration
    MmResponsiveImageComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

声明组件后,即可开始使用它:

<mm-responsive-image [sources]="[{width: 1280, src: 'http://placehold.it/800x800'}, {width: 860, src: 'http://placehold.it/600x600'}]"
    [fallbackSource]="'http://placehold.it/400x400'"
    [alt]="'Just a placeholder'"></mm-responsive-image>