Skip to content

Commit f27d5f2

Browse files
tsonevnSvetoslavTsenov
tsonevn
authored and
SvetoslavTsenov
committed
edit cookbook/image article improve code snippets (NativeScript#5396)
1 parent 7121eae commit f27d5f2

File tree

2 files changed

+120
-16
lines changed

2 files changed

+120
-16
lines changed

‎tests/app/ui/image/image-tests.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,11 @@ export const __test_SettingImageSrcTwiceMustNotMismatch = function (done) {
169169
};
170170

171171
export const test_SettingStretch_AspectFit = function () {
172-
// >> img-set-stretch
173-
const image = new ImageModule.Image();
174172
// There are 4 modes of stretching none, fill, aspectFill, aspectFit
175173
// The default value is aspectFit.
176174
// Image stretch can be set by using ImageModule.stretch enum.
175+
// >> img-set-stretch
176+
const image = new ImageModule.Image();
177177
image.stretch = "aspectFit";
178178
// << img-set-stretch
179179

‎tests/app/ui/image/image.md‎

Lines changed: 118 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,140 @@ environment: nativescript
55
description: "Examples for using Image"
66
previous_url: /ApiReference/ui/image/HOW-TO
77
---
8+
89
# Image
9-
Using an image requires the Image module to be loaded.
10+
11+
The purpose of this article is to show the basic functionality of the Image view. The snippets demonstrates some scenarios and the usage of the ImageView specifics properties
12+
13+
* [Binding image source property](#binding-image-source-property)
14+
* [Loading an image from app resources](#loading-an-image-from-app-resources)
15+
* [Loading an image from URL](#loading-an-image-from-url)
16+
* [Loading an image from file within the application](#loading-an-image-from-file-within-the-application)
17+
* [Loading an image from Data URI](#loading-an-image-from-data-uri)
18+
* [Setting image stretching](#setting-image-stretching)
19+
* [via XML](#via-xml)
20+
* [via code-behind](#via-code-behind)
21+
22+
Using an image in the code behind requires the Image module to be loaded.
23+
1024
{%snippet img-require%}
1125

12-
Binding the image source property to a view-model property.
26+
### Binding image source property
27+
28+
Binding image source property to a view-model property.
1329
``` XML
14-
<Page>
30+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
1531
<StackLayout>
16-
<!--Bind the image source property to view-model property -->
1732
{%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
18-
<!--Load form image from application -->
19-
<Image src="~/logo.png" stretch ="none" / >
20-
<!--Load form image resource -->
21-
<Image src="res://logo.png" stretch ="none" / >
22-
<!--Load form image URL-->
23-
<Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" />
2433
</StackLayout>
2534
</Page>
2635
```
27-
### Creating an image and setting its source
36+
```TypeScript
37+
import { Page } from 'ui/page';
38+
import { fromObject, EventData } from "data/observable"
39+
export function pageLoaded(args: EventData) {
40+
let page = <Page>args.object;
41+
42+
page.bindingContext = fromObject({ thumbnailImageUrl:"res://icon" });
43+
}
44+
45+
```
46+
### Loading an image from app resources
47+
48+
``` XML
49+
<Page>
50+
<StackLayout>
51+
{%raw%}<Image src="res://logo" stretch ="none" / >{%endraw%}
52+
</StackLayout>
53+
</Page>
54+
```
55+
2856
{%snippet img-create%}
2957

30-
### Creating an image and setting its src
58+
The example demonstrates how we could load an image, which is available in the App_Resources. More about adding an image in `App_Resources` folder could be found [here]({% slug images %}).
59+
60+
### Loading an image from URL
61+
62+
``` XML
63+
<Page>
64+
<StackLayout>
65+
{%raw%}<Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" />{%endraw%}
66+
</StackLayout>
67+
</Page>
68+
```
69+
3170
{%snippet img-create-src%}
3271

33-
### Creating an image and setting its src to a file within the application
72+
The sample above, demonstrates, how to load an image source while providing URL string.
73+
74+
### Loading an image from file within the application
75+
76+
``` XML
77+
<Page>
78+
<StackLayout>
79+
{%raw%}<Image src="~/logo.png" stretch ="none" / >{%endraw%}
80+
</StackLayout>
81+
</Page>
82+
```
83+
3484
{%snippet img-create-local%}
3585

36-
### Creating an image and setting its src to Data URI
86+
The Image source could be load also from a local file. The path to the image should start with a tilde(`~`) as it is shown in the example above. Using `~/` prefix, we can load images relative to the project `app` folder
87+
88+
### Loading an image from Data URI
89+
3790
{%snippet img-create-datauri%}
3891

92+
In the sample code is shown, how to load an image source data, while using data URI.
93+
3994
### Setting image stretching
95+
96+
The stretch functionality allows us to describe how content is resized to fill its allocated space.
97+
The available options for this property are as follow:
98+
99+
* `none` - the image preserves its original size
100+
* `fill` - the image is resized to fill the destination dimensions. In this case, the aspect ratio is not preserved.
101+
* `aspectFit` - the image is resized to fit the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the image, the image will be clipped to fit in the destination.
102+
* `aspectFill` - the image is resized to fill in the destination dimensions while it preserves its native aspect ratio.
103+
104+
The default value for this property is `aspectFit`.
105+
106+
Setting up the stretch property could be done via the XML code or while using code behind.
107+
108+
### via XML
109+
110+
```XML
111+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
112+
<StackLayout class="p-20">
113+
<Image loaded="imgLoaded" src="~/images/logo.png" stretch="none"/>
114+
</StackLayout>
115+
</Page>
116+
```
117+
This code snippet demonstrates the first scenario, when we setup the stretch in the XML. We setup it to `none`, which means that the image will be shown on the screen with its original size.
118+
119+
### via code-behind
120+
40121
{%snippet img-set-stretch%}
122+
123+
The second example shows, how we could set up the property via code behind. In this scenario, we get an instance of the image and set up the appropriate string value. The Image stretch could also be set by using `Stretch` enum. For example:
124+
125+
```TypeScript
126+
import * as Enums from "tns-core-modules/ui/enums"
127+
128+
const image = new ImageModule.Image();
129+
image.stretch=Enums.Stretch.none;
130+
```
131+
132+
133+
**API Reference for** [Image Class](http://docs.nativescript.org/api-reference/modules/_ui_image_.html)
134+
135+
**Native Component**
136+
137+
| Android | iOS |
138+
|:-----------------------|:---------|
139+
| [android.widget.ImageView](http://developer.android.com/reference/android/widget/ImageView.html) | [UIImageView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/) |
140+
141+
### See also
142+
143+
* [Working with Images]({% slug images %})
144+
* [Image source](https://docs.nativescript.org/cookbook/image-source)

0 commit comments

Comments
 (0)