javascript - VueJS 向图像添加文本

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属性更改为对象的数组，而不是简单的数组。

数组中的每个对象都应该有它的url和label:

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

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

<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>

或者您可以执行 Cathy Ha 在上面的评论中提到的操作:在循环中使用索引并调用 {{ Words[index] }}