Ссылки на изображения, на которые есть ссылки в магазине Vuex в Vue.js

Question

Я использую Vue.js впервые, поэтому извиняюсь, если это основной вопрос - я настроил проект vue с vue-cli , vue-router и vuex , если эта информация полезна.

Моя главная проблема здесь связана с отображением изображений или доступом к ресурсам.Я могу извлечь соответствующие данные / состояние из хранилища данных через «getter» и итерировать массивы и т. Д. В нем (например, {{student.name}} работает отлично), однако, когда я пытаюсь отобразить изображение с <img :src='student.image'>, ононе удается загрузить, и я получаю значок неработающей ссылки.Я провел некоторое исследование, и кажется, что существует соглашение об именах в веб-пакетах для связывания ресурсов с ~/ или ~@/, однако ни один из них, похоже, не работает.

Я видел другие примеры, когда люди просто ссылаются на фиксированный актив из компонента, но, поскольку я выполняю итерацию массива students, мне нужен более программный метод.Я видел несколько примеров использования computed() свойств, но я чувствую, что это не нужно?

Ниже приведен код моего компонента и соответствующих частей моего store.js файла.

Store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      score: 0
    },
    students: [
      {
        id: 1,
        name: 'Advik',
        age: '19',
        studying: 'Physiotherapy',
        image: '~/assets/images/students/advik-1.png'
      },
      {
        id: 2,
        name: 'Jake',
        age: '19',
        studying: 'Drama',
        image: '~/assets/images/students/jake-1.png'
      },
      {
        id: 3,
        name: 'Mel',
        age: '20',
        studying: 'Civil Engineering',
        image: '~/assets/images/students/mel-1.png'
      },
      {
        id: 4,
        name: 'Kaya',
        age: '18',
        studying: 'Law',
        image: '~/assets/images/students/kaya-1.png'
      }
    ]
  },
  mutations: {

  },
  methods: {

  },
  getters: {
    getStudents: state => state.students
  },
  actions: {

  }
})

Вступительный компонент:

 <template>
  <div>
    <div class="m-background"></div>
    <Brand />
    <div class="l-container">
      <div v-for="student in getStudents"
           :key="student.id">
           <img :src='student.image'>
           <router-link class="m-btn m-btn--left m-btn__primary"
            :to="{ name: 'home' }">{{ student.name }}
           </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Brand from '../../components/Brand'

export default {
  components: {
    Brand
  },
  computed: {
    ...mapGetters(['getStudents'])
  },
  name: 'Intros'
}
</script>

<style>

</style>

Спасибо большое!

Answer 1

:src='student.image' (v-binding) выполняется во время выполнения, но псевдонимы веб-пакетов работают во время компиляции.Таким образом, вы должны обернуть путь файла с псевдонимом в require.

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