链接到 Vue.js 中 vuex 存储中引用的图像

Question

我是第一次使用 Vue.js 如果这是一个基本问题，我很抱歉——如果这些信息有帮助，我已经使用vue-cli、vue-router和vuex设置了 vue 项目。

我的主要问题是显示图像或访问资产。我能够通过“getter”从数据存储中提取适当的数据/状态并在其中迭代数组等（例如，{{student.name}}完美运行）但是当我尝试显示图像<img :src='student.image'>时无法加载并且我得到断开的链接图标。我做了一些研究，似乎有与联资产的WebPack命名约定~/或者~@/然而这些都不似乎工作。

我见过其他示例，其中人们只是从组件链接到固定资产，但因为我正在迭代students数组，所以我需要一种更具编程性的方法。我看过一些使用computed()属性的例子，但我觉得这应该是不必要的？

下面是我的组件和我的store.js文件的相关部分的代码。

商店.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) 在运行时执行，但 webpack 别名在编译时工作。所以你必须将别名文件路径包装在require.

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