Динамическое изображение не загружается через: src

Question

Я работаю над простым приложением Vue, использующим vue-cli и веб-пакет для этой цели.

Итак, в основном у меня есть 2 компонента, родительский и дочерний компоненты ~

вот так:

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

там важна карта towerLineCard, это реквизит, который передается компоненту tower-line, в основном это массив с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>

проблемас изображением: src, которое я возвращаю через getImage (), таким образом, это не работает.Если я перехожу на просто src, он работает просто отлично, я сделал это просто для проверки, потому что число в пути должно быть динамическим, когда я его запустил.

Что не так с этим подходом?любая помощь?

Спасибо

Answer 1

Во-первых, вы должны использовать вычисляемое свойство вместо метода для getImage().

И чтобы решить другую проблему, вы можете добавить require(YOUR_IMAGE_PATH), когда вызываете ваше конкретное изображение или помещаете его внутрь /static/your_image.png вместо @/assets/images/cards/1.png.