Javascript 未通过：src加载动态图像

我正在开发一个简单的Vue应用程序，为此使用Vue cli和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>

<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>

towerLineCards是重要的东西，它是传递给塔线组件的一个道具，基本上是一个包含10个元素的数组，它是一个包含10个随机数字的数组，所以它可以是这样的：

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

此阵列是通过生命周期上的beforeMount创建的

在子组件上：

<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>

<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>

导出默认值{
道具：{
towerLine：{
类型：数组，
必填项：true
}
},
方法：{
getImage（索引）{
返回“@/assets/images/cards/1.png”
}
}
}
towerLine先生{
显示器：flex；
位置：相对位置；
顶部：-90px；
左：-40px；
&__形象{
宽度：80px；
高度：100px；
&：不是（：第一个孩子）{
左边距：3倍；
}
}
}

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

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

---

谢谢

首先，对于

getImage（）

，您应该使用computed属性而不是方法

---

为了解决另一个问题，您可以在调用特定图像时添加

require（YOUR_IMAGE_PATH）

，或者将其放入

/static/YOUR_IMAGE.png

中，而不是

@/assets/images/cards/1.png

在

computed

中添加getImage（），查看方法和计算的区别：这并不能解决问题，我添加了一个方法，因为我需要索引来知道要渲染的图像。我将其更改为computed属性并返回静态字符串。同样的问题。如果我直接传递路径，唯一的区别是：src不工作，src工作正常