向图像添加文本 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 属性更改为 objects 的 array 而不是简单的数组。

数组中的每个对象都应具有 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] }}

向图像添加文本 VueJS

Add text to image VueJS

javascript

swiper

vue.js