Linking to images referenced in vuex store in Vue.js

Question

I am using Vue.js for the first time so apologies if this is a basic question – I have set up the vue project with the vue-cli, vue-router

Answer 1

:src='student.image' (v-binding) is executed at runtime, but webpack aliases work in compile time. So you have to wrap the aliased file path in require.

{
  id: 1,
  name: 'Advik',
  age: '19',
  studying: 'Physiotherapy',
  image: require('~@/assets/images/students/advik-1.png')
}