Question

我正在使用一个简单的Vue应用程序，为此目的使用 vue-cli 和Webpack。

所以基本上我有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>

owerLineCards是重要的东西，它是传递到塔线组件的道具，基本上是一个包含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图像上，这种方式不起作用。如果我更改为src，它就可以正常工作，我只是以此方式进行测试，因为当我使它起作用时，路径中的数字应该是动态的。

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

谢谢

Answer 1

首先，对于getImage()，应使用计算属性而不是方法。

要解决另一个问题，可以在调用特定图像时添加require(YOUR_IMAGE_PATH)或将其放置在/static/your_image.png而不是@/assets/images/cards/1.png中。

动态图片未通过：src加载

1 个答案: