How do I download, store and retrieve picture for user avatar?

Hey fellow Ionizers ! :slight_smile:

I have a simple profile page with your posts, your basic account data and a pop up modal where you can write posts. Within this modal I want to have the same profile picture to show how the post is going to look once you post it but I don’t want to load the picture again when opening the modal because I want to save data.

I figured it would probably be the best to maybe download and store the picture in local storage and somehow retrieve it when opening the modal. But how do I exactly go about that ?

How do I download the picture and store it in a typescript variable that then can be stored in local storage ?
And very importantly how do I load the picture from local storage in HTML ?

(I know a little about localStorage.getItem and localStorage.setItem, mainly how to store and retrieve text data)

Thank you so much in advance !


I suggest you start here.

Thank you very much and I don’t want to be an Idiot but I don’t see how this is supposed to help me.
I already have a working app that displays post/arrays + user avatars from my server. Like a little twitter clone :slight_smile:

Currently I just display my avatar picture by changing the html image src with a link I’ve stored in my user profile array.
I don’t want to change that for other users in my network but as I said I don’t want to have to reload the user picture of the person that is logged in from the server every time I open my modal :confused:

I don’t know if I oversaw an important detail in the link you provided me, if I did could you please point out what you wanted to show me ?

You don’t. You could retrieve it from storage and store it as a data URI as a property in the backing controller, but as far as the HTML is concerned, you would have the same <img [src]="foo"> that you presumably have now.

Do you reload the name of the user every time? If not, just add a thumbnail to the User object you download and keep in memory.

I’m sorry, I had a lot of things going on lately and I really tried to wrap my head around this but I still can’t figure it out…

What I am doing atm is that I send my JWT token to the server to verify and then the server gives me back a Json Array with my Username, Userinformation and where the profile image is stored on the server.
I’d like to only verify JWT when I hit send though and when logging in…
So no I don’t want to reload the name every time, I want to load it when logging in and then store it until I log out.
I’m not quite sure what you mean with adding a thumbnail to the object…

@rapropos How would I exactly go about that ? Or where can I find the documentation on this ? I’m sorry but I’m a total beginner and whenever I search the Internet for your advice, it always says local storage…

You can use cordova-plugin-file-transfer to download the image into a specified directory and then use cordova-plugin-file to retrieve the image uri from said directory to use in your img tag.

Do you have example code here? Using a function in class then src pointing to function does not work.