> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/image.md).

# Image

#### cf-image

Image component consists of two parts:

* image;
* label.

### Using

app.html

```markup
<h3>{{ title0 }}</h3>
<cf-image></cf-image>
<h3>{{ title1 }}</h3>
<cf-image [properties]="myImage1" [styling]="imageStyling1"></cf-image>
<h3>{{ title2 }}</h3>
<cf-image [properties]="myImage2" [styling]="imageStyling2"></cf-image>
<h3>{{ title3 }}</h3>
<cf-image [properties]="myImage3" [styling]="imageStyling3"></cf-image>
<h3>{{ title4 }}</h3>
<cf-image [properties]="myImage4" [styling]="imageStyling2"></cf-image>
<h3>{{ title5 }}</h3>
<cf-image [properties]="myImage5" [styling]="imageStyling3" [notification]="myNotifications"></cf-image>
<cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
```

app.ts

```typescript
title0 = 'Default Image Template';
defaultImage = new ImageModel ();

title1 = 'Image without text and with style (border)';
myImage1 = new ImageModel ({
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg'
});
imageStyling1 = new ImageStylingModel ({
    image: {
      class: "image1"
    }
});

title2 = 'Image text on top';
myImage2 = new ImageModel ({
    label: 'My image text',
    labelPosition: 'top',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});
imageStyling2 = new ImageStylingModel ({
    label: {
      class: "label2"
    },
    image: {
      class: "image2"
    }
});

title3 = 'Image text on right';
myImage3 = new ImageModel ({
    label: 'My image text',
    labelPosition: 'right',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg'
});
imageStyling3 = new ImageStylingModel ({
    label: {
      class: "label2"
    },
    image: {
      class: "image3"
    }
});

title4 = 'Image text on bottom';
myImage4 = new ImageModel ({
    label:'My image text',
    labelPosition: 'bottom',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});

title5 = 'Image text on left';
myImage5 = new ImageModel ({
    label:'My image text',
    labelPosition: 'left',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});

letters = 0;
myNotifications: NotificationModel = {
    value: this.letters,
    classes: 'mat-accent',
    position: 'bottom-right'
};
sender = new ButtonModel({
    label: "Send mail",
    color: {
      foreground: "",
      background: "primary"
    }
});
sendMessage() { ++this.myNotifications.value; }
```

app.scss

```css
/deep/ {
  .image1 {
    width: 100%;
    height: 100px;
    border: 2px solid black;
  }
  .label2 {
    color: coral;
    align-items: center;
    justify-content: center;
    background: purple;
  }
  .image2 {
    width: 100%;
    height: auto;
  }
  .image3 {
    width: auto;
    height: 300px;
  }
}
```

## Image input properties

|      Attr     |   Type  | Details                                                                      |
| :-----------: | :-----: | ---------------------------------------------------------------------------- |
|    display    | boolean | To show / hide component                                                     |
|     label     |  string | It is label for image                                                        |
| labelPosition |  string | It is label position. Default: **bottom**. Can be: top, bottom, right, left. |
|      url      |  string | It is image url                                                              |

## Image styling properties

|    Attr   |     Type     | Details                                |
| :-------: | :----------: | -------------------------------------- |
| container | StylingModel | Styling properties for image container |
|   label   | StylingModel | Styling for image label                |
|   image   | StylingModel | Styling for image itself               |