Dynamic image is not loaded via :src

Question

I am working on a simple Vue app, using vue-cli and webpack for that purpose.

So basicly i have 2 components, a parent and a child component ~

like this:

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

the towerLineCards is the important thing there, it is a prop that is passed to the tower-line component, it is basicly a array with 10 elements, it is a array with 10 numbers that are shuffled, so it can be something like that:

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

this array is create via beforeMount on the lifecycle.

On the child component:

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

the issue is with the :src image that i am returning via the getImage(), this way it is not working. If i change to just src it works just fine, i did this way just to test, because the number in the path should be dynamic when i got this to work.

What is wrong with this approach? any help?

Thanks

See difference between method and computed: https://stackoverflow.com/questions/44350862/method-vs-computed-in-vue — Jonathan Hamel, Aug 24 '18 at 19:24
that don't solve the problem, i added a method because I need the index to know the image to render. I changed it to a computed property and return the static string. Same issue. if i pass directly the path the only difference is that with :src it doesn''t work and with src it works fine — af costa, Aug 24 '18 at 20:38

score 0 · Answer 1 · answered Aug 25 '18 at 01:00

Firstly, you should use a computed property instead of a method for getImage().

And to solve the other problem, you could add require(YOUR_IMAGE_PATH) when you call your specific image or put it inside /static/your_image.png instead of @/assets/images/cards/1.png.

Dynamic image is not loaded via :src

1 Answers1