Angular image directive with responsive behavior (so it never becomes larger than their parent element) and special styles.
Available in Other JavaScript Frameworks
CoreUI Angular Image Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Examples
Responsive images
Images in CoreUI for Angular are made responsive with fluid property. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-responsive-images',
templateUrl: './image-responsive-images.component.html',
imports: [ImgDirective]
})
export class ImageResponsiveImagesComponent {}<img cImg fluid src="/assets/img/angular.jpg" />Image thumbnails
In addition to our border-radius utilities, you can use prop thumbnail to give an image a rounded 1px border appearance.
import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-thumbnails',
templateUrl: './image-thumbnails.component.html',
imports: [ImgDirective]
})
export class ImageThumbnailsComponent {}<img cImg height="200" rounded src="/assets/img/angular400.jpg" thumbnail width="200" />Rounded Image
Give an image a rounded border appearance.
import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-rounded',
templateUrl: './image-rounded.component.html',
imports: [ImgDirective]
})
export class ImageRoundedComponent {}<img cImg rounded src="/assets/img/angular400.jpg" height="200" />
<img cImg src="/assets/img/angular400.jpg" height="200" />
Aligning images
Align images with the align property.
import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-aligning-images',
templateUrl: './image-aligning-images.component.html',
imports: [ImgDirective]
})
export class ImageAligningImagesComponent {}<div class="clearfix">
<img cImg align="start" height="200" rounded src="/assets/img/angular400.jpg" width="200" />
<img cImg align="end" [rounded]="true" src="/assets/img/angular400.jpg" width="200" />
</div>import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-aligning-images-2',
templateUrl: './image-aligning-images-2.component.html',
imports: [ImgDirective]
})
export class ImageAligningImages2Component {}<div class="clearfix">
<img cImg align="center" height="200" rounded src="/assets/img/angular400.jpg" width="200" />
</div>import { Component } from '@angular/core';
import { ImgDirective } from '@coreui/angular';
@Component({
selector: 'docs-image-aligning-images-3',
templateUrl: './image-aligning-images-3.component.html',
imports: [ImgDirective]
})
export class ImageAligningImages3Component {}<div class="text-center">
<img cImg height="200" src="/assets/img/angular400.jpg" width="200" />
</div>API reference
Image Module
import { ImgModule } from '@coreui/angular';
@NgModule({
imports: [ImgModule,]
})
export class AppModule(){}cImg
directive
import { ImgDirective } from '@coreui/angular'