将文本添加到图像 VueJS

Question

我有一个 swiper，可以显示我用数组指定的图片。但是我需要给这些图片添加文字（我需要文字在图片中），但是我无法解决这个问题。也许有人知道如何做到这一点？

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属性更改为arrayofobjects而不是简单的数组。数组内的每个对象都应该有它的url和label：...&nbsp; &nbsp; banners: [&nbsp; &nbsp; &nbsp; &nbsp; {img: "block1.png", label: 'my label'},&nbsp; &nbsp; &nbsp; &nbsp; {img: "block2.png", label: 'label 2'},&nbsp; &nbsp; ],然后，在循环中，您可以轻松访问每个横幅的标签：<div class="swiper-wrapper">&nbsp; &nbsp; <div v-for="banner in banners" :key="banner" class="swiper-slide">&nbsp; &nbsp; <p>{{ banner.label }}</p>&nbsp; &nbsp; <img :src="getImage(banner.img)"></div>或者你可以做Cathy Ha在上面评论中提到的：使用循环上的索引并调用 {{ words[index] }}