casnet1
83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div class="divMaster row ">
|
|
<div
|
|
id="carouselExampleControls"
|
|
class="carousel slide col-md-10 col-lg-10 col-xl-10 my-5 col-12 mx-auto"
|
|
data-ride="carousel"
|
|
>
|
|
<div class="carousel-inner">
|
|
<div
|
|
class="carousel-item"
|
|
v-bind:key="libro.id"
|
|
v-for="(libro, idx) in Libros"
|
|
:class="{ active: idx == 0 }"
|
|
>
|
|
<img :src="libro.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 {
|
|
Libros: []
|
|
};
|
|
},
|
|
async created() {
|
|
try {
|
|
let path = `${config.api}/imagenCarrusel?nombre=`;
|
|
let nombres = await axios.get(`${config.api}/nombreCarrusel`);
|
|
nombres = nombres.data.data;
|
|
for (let i = 0; i < nombres.length; i++) {
|
|
console.log(path);
|
|
let config = {
|
|
// example url
|
|
url: `${path}${nombres[i]}`,
|
|
method: "GET",
|
|
responseType: "blob"
|
|
};
|
|
await axios(config).then(response => {
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(response.data);
|
|
reader.onload = () => {
|
|
this.Libros.push({ id: i, img: reader.result });
|
|
};
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log(`Ocurrio un error msj: ${error}`);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.divMaster {
|
|
height: auto;
|
|
}
|
|
</style>
|