How to render the downloaded image on view using natievscript


#1

service file:

private folder: fs.Folder = fs.Folder.fromPath(fs.path.join(fs.knownFolders.documents().path, "Signet_Images"));
filename: string = "test.jpeg";
   path: string = fs.path.join(this.folder.path, this.filename);getImageFromDatabase() {
   return http.getFile({
       url: this.sessionservice.geturl() + "/fetch_image/" + encodeURIComponent(Config.locationCode),
       method: "GET",
       headers: { "Authorization": this.token }
   }, this.path);
}

component file

this.imageCacheService.getImageFromDatabase().then((pic) => {
                    console.log(`Downloaded File: ${JSON.stringify(pic)}`);
                    this.visitedImgSource = this.imageCacheService.getImage("test");
                    console.log(this.visitedImgSource);
                }).catch(error => {
                    console.log(`getFile error: ${JSON.stringify(error)}`);
                });

console output of visitedImgSource is null
getimage func def

    public getImage(key: string): imageSource.ImageSource {
        const filePath = fs.path.join(this.folder.path, `${key}.jpeg`);
        return imageSource.fromFile(filePath);
    }

html file


		<StackLayout row="0">

			<Label columnSpan="3" class="h2 text-center" [text]="foundImageTitle"></Label>
		</StackLayout>

		<GridLayout row="1" rows="*,*">

			<StackLayout row="0" margin="30">

				<Image row="0" class="img-round" height="175" width="175" stretch="aspectFill" [src]="visitedImgSource"></Image>
			</StackLayout>

			<GridLayout row="1" rows="*,*" columns="*,*">

				<StackLayout row="0" col="0">

					<button class="btn btn-sm btn-info  btn-rounded" (tap)="retakePhoto()" text="Retake"></button>
				</StackLayout>

				<StackLayout row="0" col="1">

					<button class="btn btn-sm btn-info btn-rounded" (tap)="finalStep()" text="Use"></button>
				</StackLayout>
			</GridLayout>

		</GridLayout>
	</GridLayout>


#2

Use a Image component or set it as background-image to any view.


#3

thanks for such a quick response but i did not get you


#4

tried using as background-image in same view…but no change in output

<GridLayout class="new-user-layout" rows="auto, auto" *ngIf="isFinalStep" **background-image="visitedImgSource"**>

		<StackLayout row="0">

			<Label columnSpan="3" class="h2 text-center" [text]="foundImageTitle"></Label>
		</StackLayout>

		<GridLayout row="1" rows="*,*">

			<StackLayout row="0" margin="30">

				<Image row="0" class="img-round" height="175" width="175" stretch="aspectFill" [src]="visitedImgSource"></Image>
			</StackLayout>

			<GridLayout row="1" rows="*,*" columns="*,*">

				<StackLayout row="0" col="0">

					<button class="btn btn-sm btn-info  btn-rounded" (tap)="retakePhoto()" text="Retake"></button>
				</StackLayout>

				<StackLayout row="0" col="1">

					<button class="btn btn-sm btn-info btn-rounded" (tap)="finalStep()" text="Use"></button>
				</StackLayout>
			</GridLayout>

		</GridLayout>
	</GridLayout>

#5

That is not how you use, please refer the right syntax - it’s an attribute backgroundImage and it should use attribute binding when the source value is set from a variable in controller.


#6

ok but i am trying to render the downloaded image on view …not to set as background image

how will setting it as background image will be productive
Pls explain


#7

I didn’t actually ask you to backgroundImage, but either of them. If you have the image in place either of them should work.