how do I display the image that was saved to local storage?

Question

My problem is I saved an image to the local storage but when I retrieve it from vuex and paste it into the code the image does not appear.

The object I get from vuex:

place: {
    ....
    imgPath: C:\Users\...\Pictures\abc\b\first.jpg
    ....
}

and vuetify code:

<v-img v-bind:src="place.imgPath"></v-img>

`imgPath: C:\Users\...\Pictures\abc\b\first.jpg` - well, that doesn't look right — Bravo, Nov 09 '19 at 11:43

score 2 · Accepted Answer · answered Nov 09 '19 at 12:31

Vue is intended to be run on a webserver. Including files directly from your local hard drive is a security problem and thus not allowed. Either include the image in your assets so Vue can include it that way, or host the image on a domain somewhere, so you can hot link it from there. Again, paths starting with a drive letter will not (and should not) work.

score 0 · Answer 2 · edited Jul 15 '22 at 02:53

0

here you have a stack question on image in localstorage and accessing it: How to save an image to localStorage and display it on the next page?

and here the vue official doc for client side storage: https://v2.vuejs.org/v2/cookbook/client-side-storage.html

should be enough to answer your issue :)

edited Jul 15 '22 at 02:53

tony19

125,647
18
229
307

answered Nov 09 '19 at 11:59

Dylan Tuna

85
2
6

Localstorage is my local repository on my computer – javorkabotond Nov 09 '19 at 12:20

how do I display the image that was saved to local storage?

2 Answers2