Vue not binding data to image src

Question

I'm having a problem binding data to src attribute in image. This is my code where I have :src and trying to bind image to it. Also I printed this.image in created() and it is getting printed fine. Here is the code

<img class="d-block w-100" :src="image" />

    export default {
      name: 'How',
      data(){
        return{
          image: '../../assets/img/how_to_oka_6.png'
        }
      }
    }

Boussadjra Brahim · Accepted Answer · 2019-04-08 18:07:30Z

4

You should import that image since it considered as a module like :

<img class="d-block w-100" :src="image" />

    export default {
      name: 'How',
      data(){
        return{
          image: require('../../assets/img/how_to_oka_6.png')
        }
      }
    }

answered Apr 8, 2019 at 18:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue not binding data to image src

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related