Question

我的用例是这样的。

我将图片名称存储在名为 imagesFolder
然后我从该数组中检索名称并显示在我的vue组件上。

这是我的代码

<template lang="html">
  <div class="">
    <div class="" v-for="image in imagesFolder">
      <img v-bind:src="image" alt=""  height="100px" width="auto"><br>
    </div>
  </div>

    </template>

    <script>
    export default {
      data(){
        return{
          imagesFolder:['src/assets/mickey.png','src/assets/logo.png']
        }
      }
    }
    </script>

我的问题是每次我必须存储静态位置部分 src / assets / 而不是这样做。有没有办法将此 src / assets / 部分附加到img标记。我希望你理解我的问题。

Answer 1

您只能在data。

中的数组中提供图片的文件名

<script>
  export default {
    data() {
      return{
        images: ['mickey', 'logo']
      }
    }
  }
</script>

然后，您可以循环并仅使用图像的文件名作为动态值。

<div class="" v-for="image in images">
  <img :src="`src/assets/${image}.png`" alt=""  height="100px" width="auto"><br>
</div>

Answer 2

您可以使用directive：

Vue.directive('src', function (el, binding) {
  el.src = 'src/assets/' + binding.value
})

然后您可以使用v-src：

<img v-src="image"

现在，您可以安全地使用文件名：

imagesFolder:['mickey.png','logo.png']

VueJS将静态字符串附加到v-bind

2 个答案: