Vue.js의 vuex 스토어에서 참조되는 이미지에 링크하는 중

Vue.js의 vuex 스토어에서 참조되는 이미지에 링크하는 중

처음 Vue.js를 사용하고 있기 때문에 기본적인 질문이라면 죄송합니다.이 정보가 도움이 된다면 vue-cli, vue-router 및 vuex를 사용하여 vue 프로젝트를 셋업했습니다.

여기서의 주된 문제는 이미지를 표시하거나 자산에 액세스하는 것입니다.「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>

정말 감사합니다!

:src='student.image'(v-binding)은 런타임에 실행되지만 웹 팩에일리어스는 컴파일 시에 동작합니다.따라서 에일리어스된 파일 경로를require.

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

언급URL : https://stackoverflow.com/questions/53412106/linking-to-images-referenced-in-vuex-store-in-vue-js