Display a downloaded blob image





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







3















I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];

var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}


And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.



this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});


So the next step is to display the image which is in the path this.file.dataDirectory + filename, how can I do this?



After searching for a solution and reading I understand that I have to:




  1. Load the file binary content.


  2. Convert this binary content to base 64.


  3. Then display it with src="data:image/jpeg;base64,"+{{image_in_base64}};



But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?










share|improve this question

























  • This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

    – Mathyn
    Jan 4 at 14:02











  • @Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

    – OiciTrap
    Jan 4 at 14:09













  • Did you get any errors when doing this? e.g. a 404 or something else?

    – Mathyn
    Jan 4 at 14:09











  • For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

    – andrea06590
    Jan 4 at 14:13













  • @Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

    – OiciTrap
    Jan 4 at 14:15




















3















I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];

var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}


And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.



this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});


So the next step is to display the image which is in the path this.file.dataDirectory + filename, how can I do this?



After searching for a solution and reading I understand that I have to:




  1. Load the file binary content.


  2. Convert this binary content to base 64.


  3. Then display it with src="data:image/jpeg;base64,"+{{image_in_base64}};



But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?










share|improve this question

























  • This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

    – Mathyn
    Jan 4 at 14:02











  • @Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

    – OiciTrap
    Jan 4 at 14:09













  • Did you get any errors when doing this? e.g. a 404 or something else?

    – Mathyn
    Jan 4 at 14:09











  • For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

    – andrea06590
    Jan 4 at 14:13













  • @Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

    – OiciTrap
    Jan 4 at 14:15
















3












3








3


1






I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];

var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}


And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.



this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});


So the next step is to display the image which is in the path this.file.dataDirectory + filename, how can I do this?



After searching for a solution and reading I understand that I have to:




  1. Load the file binary content.


  2. Convert this binary content to base 64.


  3. Then display it with src="data:image/jpeg;base64,"+{{image_in_base64}};



But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?










share|improve this question
















I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var filename = splited_url[splited_url.length - 1];

var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
},
err => console.error(err),
() => { }
);
}


And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.



this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
alert("File Exist!!!"); // I always enter here
})
.catch((err) => {
alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
entry.getMetadata((metadata) => {
alert("SIZE: " + metadata.size);
})
}).catch((error)=>{
alert(error);
});


So the next step is to display the image which is in the path this.file.dataDirectory + filename, how can I do this?



After searching for a solution and reading I understand that I have to:




  1. Load the file binary content.


  2. Convert this binary content to base 64.


  3. Then display it with src="data:image/jpeg;base64,"+{{image_in_base64}};



But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?







javascript angular ionic-framework ionic3 blob






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 4 at 13:39







OiciTrap

















asked Jan 4 at 13:31









OiciTrapOiciTrap

1,06921233




1,06921233













  • This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

    – Mathyn
    Jan 4 at 14:02











  • @Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

    – OiciTrap
    Jan 4 at 14:09













  • Did you get any errors when doing this? e.g. a 404 or something else?

    – Mathyn
    Jan 4 at 14:09











  • For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

    – andrea06590
    Jan 4 at 14:13













  • @Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

    – OiciTrap
    Jan 4 at 14:15





















  • This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

    – Mathyn
    Jan 4 at 14:02











  • @Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

    – OiciTrap
    Jan 4 at 14:09













  • Did you get any errors when doing this? e.g. a 404 or something else?

    – Mathyn
    Jan 4 at 14:09











  • For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

    – andrea06590
    Jan 4 at 14:13













  • @Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

    – OiciTrap
    Jan 4 at 14:15



















This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

– Mathyn
Jan 4 at 14:02





This may sound stupid but assuming you can read the file from disk can't you just point your image src to the file on disk?

– Mathyn
Jan 4 at 14:02













@Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

– OiciTrap
Jan 4 at 14:09







@Mathyn I tried src={{full_path_image}}, but it didn't work, that's what you mean?

– OiciTrap
Jan 4 at 14:09















Did you get any errors when doing this? e.g. a 404 or something else?

– Mathyn
Jan 4 at 14:09





Did you get any errors when doing this? e.g. a 404 or something else?

– Mathyn
Jan 4 at 14:09













For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

– andrea06590
Jan 4 at 14:13







For the 1st and 2nd step try somehting like this : stackoverflow.com/questions/32833797/…

– andrea06590
Jan 4 at 14:13















@Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

– OiciTrap
Jan 4 at 14:15







@Mathyn The this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true }); doesn't work in a browser so I have to test iit in an actual Android device. In my case when I use src={{full_path_image}} the entire Page is not even displayed, but removing that makes everything work fine.

– OiciTrap
Jan 4 at 14:15














2 Answers
2






active

oldest

votes


















0














Following is the code that worked for me.



<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>


Then in your typescript code.



@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}


UPDATE - If you are using Ionic Native File or Cordova File Plugin



Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.






share|improve this answer


























  • Where do I put the file path?

    – OiciTrap
    Jan 4 at 14:30











  • In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

    – Ahmed Shabib
    Jan 5 at 8:35













  • There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

    – Ahmed Shabib
    Jan 5 at 8:39





















0














At the end it was easier and faster to use LocalStorage instead of files



First I made the function download_save_picture(picture_url) which save the content of the image in picture_url in Base64 in localStorage(key), the key will be everything after the last /, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg the content will be saved in icon.img_lights.jpg.



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();

reader.readAsDataURL(data);

reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}


Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>, where useLocalImage simply returns the content saved in localStorage.



useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

var icon_name = window.localStorage.getItem('icon.' + name);

return icon_name;
}





share|improve this answer
























  • When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

    – Mathyn
    Jan 8 at 8:13












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54039937%2fdisplay-a-downloaded-blob-image%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Following is the code that worked for me.



<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>


Then in your typescript code.



@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}


UPDATE - If you are using Ionic Native File or Cordova File Plugin



Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.






share|improve this answer


























  • Where do I put the file path?

    – OiciTrap
    Jan 4 at 14:30











  • In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

    – Ahmed Shabib
    Jan 5 at 8:35













  • There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

    – Ahmed Shabib
    Jan 5 at 8:39


















0














Following is the code that worked for me.



<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>


Then in your typescript code.



@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}


UPDATE - If you are using Ionic Native File or Cordova File Plugin



Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.






share|improve this answer


























  • Where do I put the file path?

    – OiciTrap
    Jan 4 at 14:30











  • In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

    – Ahmed Shabib
    Jan 5 at 8:35













  • There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

    – Ahmed Shabib
    Jan 5 at 8:39
















0












0








0







Following is the code that worked for me.



<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>


Then in your typescript code.



@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}


UPDATE - If you are using Ionic Native File or Cordova File Plugin



Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.






share|improve this answer















Following is the code that worked for me.



<input #fileinput type="file" [(ngModel)]="file_obj" (click)="resetFileInput()" (change)="onUploadChange()"/>


Then in your typescript code.



@ViewChild('fileinput') file_input;
file_obj:any;
onUploadChange() {
const file = this.file_input.nativeElement.files[0];
const fReader = new FileReader();
fReader.readAsDataURL(file);
fReader.onloadend = function(event) {
//do whatever you want with the result here.
console.log(event.target['result']);
};
}
resetFileInput() {
this.file_input.nativeElement.value = '';
}


UPDATE - If you are using Ionic Native File or Cordova File Plugin



Ionic Native file is different from the browser File object.
There seems to be a method called getFile() , which returns FileEntry object
This has something called method .file() which returns a Native file object .
And then use the FileReader to read the file as dataURL using readAsDataURL method.







share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 5 at 8:45

























answered Jan 4 at 14:12









Ahmed ShabibAhmed Shabib

3621613




3621613













  • Where do I put the file path?

    – OiciTrap
    Jan 4 at 14:30











  • In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

    – Ahmed Shabib
    Jan 5 at 8:35













  • There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

    – Ahmed Shabib
    Jan 5 at 8:39





















  • Where do I put the file path?

    – OiciTrap
    Jan 4 at 14:30











  • In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

    – Ahmed Shabib
    Jan 5 at 8:35













  • There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

    – Ahmed Shabib
    Jan 5 at 8:39



















Where do I put the file path?

– OiciTrap
Jan 4 at 14:30





Where do I put the file path?

– OiciTrap
Jan 4 at 14:30













In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

– Ahmed Shabib
Jan 5 at 8:35







In the browser, you won't be able to give the file path to open a file, you need to select it via the input file field. If you are using a Cordova library , then you need to refer to that documentation.

– Ahmed Shabib
Jan 5 at 8:35















There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

– Ahmed Shabib
Jan 5 at 8:39







There seems to be a method called getFile() ionicframework.com/docs/native/file/#getFile , which returns FileEntry object, this has something called .file method you could use this to get the file object cordova.apache.org/docs/en/1.8.0/cordova/file/fileentry/… And thenn use the FileReader to read the file as dataURL

– Ahmed Shabib
Jan 5 at 8:39















0














At the end it was easier and faster to use LocalStorage instead of files



First I made the function download_save_picture(picture_url) which save the content of the image in picture_url in Base64 in localStorage(key), the key will be everything after the last /, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg the content will be saved in icon.img_lights.jpg.



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();

reader.readAsDataURL(data);

reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}


Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>, where useLocalImage simply returns the content saved in localStorage.



useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

var icon_name = window.localStorage.getItem('icon.' + name);

return icon_name;
}





share|improve this answer
























  • When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

    – Mathyn
    Jan 8 at 8:13
















0














At the end it was easier and faster to use LocalStorage instead of files



First I made the function download_save_picture(picture_url) which save the content of the image in picture_url in Base64 in localStorage(key), the key will be everything after the last /, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg the content will be saved in icon.img_lights.jpg.



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();

reader.readAsDataURL(data);

reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}


Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>, where useLocalImage simply returns the content saved in localStorage.



useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

var icon_name = window.localStorage.getItem('icon.' + name);

return icon_name;
}





share|improve this answer
























  • When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

    – Mathyn
    Jan 8 at 8:13














0












0








0







At the end it was easier and faster to use LocalStorage instead of files



First I made the function download_save_picture(picture_url) which save the content of the image in picture_url in Base64 in localStorage(key), the key will be everything after the last /, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg the content will be saved in icon.img_lights.jpg.



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();

reader.readAsDataURL(data);

reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}


Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>, where useLocalImage simply returns the content saved in localStorage.



useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

var icon_name = window.localStorage.getItem('icon.' + name);

return icon_name;
}





share|improve this answer













At the end it was easier and faster to use LocalStorage instead of files



First I made the function download_save_picture(picture_url) which save the content of the image in picture_url in Base64 in localStorage(key), the key will be everything after the last /, so if we use the URL https://www.w3schools.com/w3css/img_lights.jpg the content will be saved in icon.img_lights.jpg.



download_save_picture(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

if (localStorage.getItem('icon.' + name) === null) {
var config = { responseType: 'blob' as 'blob' };

this.httpClient.get(picture_url, config).subscribe(
data => {
var reader = new FileReader();

reader.readAsDataURL(data);

reader.onload = function() {
window.localStorage.setItem('icon.' + name, reader.result);
}
},
err => console.error(err),
() => { }
);
}
}


Then at the view I display the image with <img src={{useLocalImage(item.image)}}></p>, where useLocalImage simply returns the content saved in localStorage.



useLocalImage(picture_url) {
let splited_url = picture_url.split('/');
var name = splited_url[splited_url.length - 1];

var icon_name = window.localStorage.getItem('icon.' + name);

return icon_name;
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 7 at 15:16









OiciTrapOiciTrap

1,06921233




1,06921233













  • When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

    – Mathyn
    Jan 8 at 8:13



















  • When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

    – Mathyn
    Jan 8 at 8:13

















When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

– Mathyn
Jan 8 at 8:13





When doing this please keep in my mind limits apply to localstorage. See this question for some more info.

– Mathyn
Jan 8 at 8:13


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54039937%2fdisplay-a-downloaded-blob-image%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas