So , that was quite a challenge.
After saving the images as byte[] pretty neat through the MVC client into the MS SqlServer , I wanted to get them into the app of Ionic3 with Angular4 ..
The problem was –
Well there were several problems –
- How to return the data through the http without loosing data in “translation” on the way ?
Solution is in C# WCF before returning it convert to base64 – it will send the data intact through the www traffic.
dto.Logo = Convert.ToBase64String(dal.Logo);
2. When we get the data – we need to translate it into the image again :
this post helped me – Search for the comment with 400 upvotes!
So, in my ts client side – my Ionic3 Angular4 baby , I added a function translating the byte[] into a Blob.
A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.
b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || ”;
sliceSize = sliceSize || 512;let byteCharacters = atob(b64Data);
let byteArrays = [];for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}let blob = new Blob(byteArrays, {type: contentType});
return blob;
}
3. Now I started getting those messages from Chrome
So I’ve built a pipe as suggested here in compbination with the DomSanitation suggested here :
So at last I have taken this solution :
import { Pipe } from ‘@angular/core’;
import { Pipe } from ‘@angular/core’;
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from ‘@angular/platform-browser’;
@Pipe({ name: ‘safe’})export class SafePipe {
constructor(protected _sanitizer: DomSanitizer) {
}
public transform(value: string, type: string = ‘html’): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {switch (type) {
case ‘html’: return this._sanitizer.bypassSecurityTrustHtml(value);
case ‘style’: return this._sanitizer.bypassSecurityTrustStyle(value);
case ‘script’: return this._sanitizer.bypassSecurityTrustScript(value);
case ‘url’: return this._sanitizer.bypassSecurityTrustUrl(value);
case ‘resourceUrl’:
return this._sanitizer.bypassSecurityTrustResourceUrl(value);
default: throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
<img [src]=”company.LogoImage | safe: ‘resourceUrl'”>
Written
on 06/08/2017