PortaFront/src/components/carrusel.vue

<template>
  <div class="divMaster row my-5">
    <div
      id="carouselExampleControls"
      class="carousel slide col-md-10 col-lg-10 col-xl-10  col-12 mx-auto"
      data-ride="carousel"
    >
      <div class="carousel-inner" >
        
          <div class="carousel-item active"  v-bind:key="imagen.id" v-for="imagen in imagenes">
            <img :src="imagen.img" class="d-block w-100 img-fluid" alt="img" />
          </div>
          
      </div> 

      <a class="carousel-control-prev"  href="#carouselExampleControls"  role="button" data-slide="prev" >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a  class="carousel-control-next"  href="#carouselExampleControls"  role="button" data-slide="next" >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
  
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
export default {
  data() {
    return {
      imagenes: [

      ]
    };
  },
  async created() {
    try {
      let nombres = await axios.get(`${config.api}/nombreCarrusel`);
      nombres = nombres.data.data;
      for (let i = 0; i < nombres.length; i++) {
        console.log(`  Este es el nombre ${nombres[i]}`);
        let config = {
          // example url
          url: `http://localhost:3000/imagenCarrusel?nombre=${nombres[i]}`,
          method: "GET",
          responseType: "blob"
        };
        await axios(config).then(response => {
          let reader = new FileReader();
          reader.readAsDataURL(response.data);
          reader.onload = () => {
            this.imagenes.push({ id: i, img: reader.result });
          };
        });
      }
      
    }
    catch (error) {
      console.log(`Ocurrio un error msj: ${error}`);
    }
  }
};
</script>

<style scoped>
.divMaster {
  height: auto;
}
</style>