Vue image Src binding not showing

Question

Hello I was creating an upload Image but I have incounter an issue on preview image I have seen this solution and tried to replicate the File is selected and Blob URL is seen but I am having an issue on the URL and update Here is the link for the article. Also if posible to change the upload to target only Image files.

Seen solution for Upload

HTML code

  <input type="file" @change="uploadImageChange"/>
          <div class="dashboard-Image-modal__previewUploadImage">
              <img if="imageSelectedUrl" :src="imageSelectedUrl"/>
          </div>

Method

data(){
return {
   imageSelectedUrl:null
};
    },

methods:{
uploadImageChange(e){
      const file = e.target.files[0];
      this.imageSelectedUrl = URL.createObjectURL(file);
    }
}

Your code works fine for me: https://jsfiddle.net/teddyrised/eq49yd6m/ — Terry, Dec 18 '19 at 07:29

score 0 · Answer 1 · answered Dec 18 '19 at 07:36

0

I think i found the problem, you write:

data(){
   return {
       imageSelectedUrl:null
   },

you missed }. Try to write:

data () {
        return {
            imageSelectedUrl: null
        }
    },

answered Dec 18 '19 at 07:36

El-Hani

103
6

ah sorry i just mistype that when i was transferring the code here. But on my application it has. – pine ching Dec 18 '19 at 08:49

Vue image Src binding not showing

1 Answers1