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

Question

我是第一次使用 Vue.js，如果这是一个基本问题，我深表歉意 – 我已经使用 vue-cli 设置了 vue 项目，vue-router 和 vuex 如果此信息有帮助。

我的主要问题是显示图像或访问资产。我能够通过 'getter' 从数据存储中提取适当的 data/state 并在其中迭代数组等（例如， {{student.name}} 完美运行）但是当我尝试显示带有 <img :src='student.image'> 的图像加载失败，我得到一个损坏的 link 图标。我做了一些研究，似乎有一个 webpack 命名约定，用于 linking 资产 ~/ 或 ~@/ 但是这些似乎都不起作用。

我见过其他示例，其中人们只是从组件 link 到固定资产，但因为我正在迭代 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) 在运行时执行，但 webpack 别名在编译时起作用。因此，您必须将别名文件路径包装在 require.

中

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

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

Linking to images referenced in vuex store in Vue.js

javascript

vue.js

url-routing

vuex