将文本添加到图像 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：

...

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