动态图像未通过:src加载

我正在开发一个简单的Vue应用程序,使用 Vue客户端 以及用于此目的的Webpack。

所以基本上我有两个组件,一个父组件和一个子组件~

这样地:

<template>
  <div class="triPeaks__wrapper">
    <div class="triPeaks">
      <tri-tower class="tower"></tri-tower>
      <tri-tower class="tower"></tri-tower>
      <tri-tower class="tower"></tri-tower>
    </div>
    <div class="triPeaks__line">
      <tower-line :towerLine="towerLineCards" />
    </div>
    <tri-pack />
  </div>
</template>

拖缆卡在这里很重要,它是传递给塔线组件的一个道具,基本上是一个有10个元素的数组,它是一个有10个数字的数组,所以它可以是这样的:

[1、5、2、6、8、9、16、25、40、32]

此数组是通过生命周期上的beforemount创建的。

在子组件上:

<template>
  <div class="towerLine-wrapper">
    <div class="towerLine">
      <img v-for="index in 10" :key="index" class="towerLine__image" :src="getImage(index)" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    towerLine: {
      type: Array,
      required: true
    }
  },
  method: {
    getImage (index) {
      return '@/assets/images/cards/1.png'
    }
  }
}
</script>

<style lang="scss">
  .towerLine {
    display: flex;
    position: relative;
    top: -90px;
    left: -40px;

    &__image {
      width: 80px;
      height: 100px;

      &:not(:first-child) {
        margin-left: 3px;
      }
    }
  }
</style>

问题在于我通过getImage()返回的:src映像,这样它就不工作了。如果我改为just-src,它会很好地工作,我这样做只是为了测试,因为当我让它工作时,路径中的数字应该是动态的。

这种方法有什么问题?有什么帮助吗?

谢谢