动态图像不是通过 :src 加载的答案

【问题标题】：Dynamic image is not loaded via :src动态图像不是通过 :src 加载的
【发布时间】：2018-08-24 19:13:03
【问题描述】：

我正在开发一个简单的 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>

towerLineCards 是最重要的东西，它是一个传递给 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>

问题在于我通过 getImage() 返回的 :src 图像，这样它就不起作用了。如果我更改为 src 就可以了，我这样做只是为了测试，因为当我让它工作时路径中的数字应该是动态的。

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

谢谢

【问题讨论】：

在computed中添加getImage()
查看方法和计算之间的区别：stackoverflow.com/questions/44350862/method-vs-computed-in-vue
那不能解决问题，我添加了一个方法，因为我需要索引来知道要渲染的图像。我将其更改为计算属性并返回静态字符串。同样的问题。如果我直接通过路径，唯一的区别是使用 :src 它不起作用，而使用 src 它工作正常

标签： javascript image vue.js webpack

【解决方案1】：

首先，您应该使用计算属性而不是 getImage() 的方法。

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

【讨论】：