CODEWITHSUNDEEP
vue.jsvuejs2
Quan Nguyen
Quan Nguyen

Reputation: 99

Get image in VueJS?

In components I have Admin.vue and I call image using 

<img :src="imageuser">

Here components Admin.vue I call script export default 

export default{
    data(){
        return{
            lists:{},
            imageuser:"",
        }
    },
    mounted(){
        axios.post('admin/getDataAdmin',this.$data)
             .then((response)=> this.lists = response.data)
             .then((response)=>this.imageuser="source/admin/assets/img/"+response.data.image)
             .catch((error)=> this.errors = error.response.data.errors);
    },

I can get data in database to array lists, but in imageuser I get imageuser:"". When I console.log(response.data.image) I get error Cannot read property 'data' of undefined

Upvotes: 0

Views: 1145

Answers (1)

acdcjunior
acdcjunior

Reputation: 135812

Your first handler is returning the data already:

axios.post('admin/getDataAdmin',this.$data)
     .then((response)=> this.lists = response.data) // this returns `response.data`
     .then((response)=> // so, at this point, the argument is `response.data`
          this.imageuser="source/admin/assets/img/"+response.data.image
     )

Do:

axios.post('admin/getDataAdmin',this.$data)
     .then((response)=> this.lists = response.data)
     .then((data)=>this.imageuser="source/admin/assets/img/"+data.image)
//          ^^^^ --- changed                      changed ---^^^^

But, from your error, the response.data is being undefined.

Upvotes: 1

Related Questions