Question

我有一个刷卡器，可以显示我使用数组指定的图片。但是我需要在这些图片中添加文本（我需要文本在图片中），但是我无法解决此问题。也许有人知道该怎么做？

HTML

<template>
  <div>
    <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
        <div class="swiper-wrapper">
            <div class="swiper-slide "   v-for="banner in banners" :key="banner">
              <img :src="getImage(banner)">
          </div>
        </div>
      </div>
    </div>
</template>

JS

 export default {
    data() {
      return {
         banners: [
           'Block1.png' , 'Block2.png' , 'Block3.png' ,'Block4.png'
         ] ,

         words :[
           'ABOUT AS' , 'WE OFFER' , 'OUR STAFF' , 'PORTFOLIO'
         ],

        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: -400,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    },
    methods : {
      getImage(src){
        return require(`~/assets/image/banners/${src}` )
      },
      callback (){

      },
      addWords(){

      },
    },
  }

Answer 1

将您的banners属性更改为array的{{1}}，而不是简单的数组。

数组中的每个对象都应具有objects和url：

label

然后，在循环中，您可以轻松访问每个横幅的标签：

...
    banners: [
        {img: "block1.png", label: 'my label'},
        {img: "block2.png", label: 'label 2'},
    ],

或者您可以执行上面注释中的Cathy Ha提到的操作：在循环上使用索引并调用<div class="swiper-wrapper"> <div v-for="banner in banners" :key="banner" class="swiper-slide"> <p>{{ banner.label }}</p> <img :src="getImage(banner.img)"> </div>

向图像VueJS添加文本

1 个答案: