小编Jac*_*rke的帖子

我觉得这里有一个明显的答案，但我无法弄清楚为什么下面的模型示例中的 \xe2\x80\x93#one不被“推” #three？

看看MDN 给出的最后一个例子，粘性元素似乎将另一个推出窗口，而这里#one&#three似乎只是相互滑动。我觉得这与高度有关（？），但任何解释这一点的帮助将不胜感激！

* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1 {\r\n  text-align: center;\r\n  color: #000;\r\n  font: bold 20vw Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.sticky {\r\n  position: sticky;\r\n  top: 0px;\r\n}\r\n\r\n#start {\r\n  width: 100%;\r\n  height: 50vh;\r\n  background: #fff;\r\n}\r\n\r\n#one {\r\n  height: 100vh;\r\n  width: 100%;\r\n  background: url(\'https://picsum.photos/900/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#two {\r\n  width: 50%;\r\n  position: relative;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/800/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#three {\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/700/1200/?random\');\r\n …

我是第一次使用 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: …