79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<template>
|
|
<b-container class="mt-5">
|
|
<div class="mb-5">
|
|
<h1 class="mb-4" style="text-align:left;">Agregar Imagen</h1>
|
|
<b-row>
|
|
<b-col class="p-0" cols="8">
|
|
<b-form-file
|
|
v-model="file1"
|
|
block
|
|
placeholder="Seleccione la imagen o arrastre aqui..."
|
|
accept=".png"
|
|
></b-form-file>
|
|
</b-col>
|
|
<b-col>
|
|
<b-button block variant="success">Agregar</b-button>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
<h1 class="mb-4" style="text-align:left;">Eliminar Imagen</h1>
|
|
<div class="divMaster row ">
|
|
<div class=" d-flex flex-wrap " style="justify-content: space-between;">
|
|
<div v-bind:key="libro.id" v-for="(libro, idx) in Libros" :class="{ active: idx == 0 }">
|
|
<b-card class="mb-3" style="width: 28rem;">
|
|
<b-card-img :src="libro.img" alt="Image" ></b-card-img>
|
|
<b-card-footer><b-button variant="danger">Eliminar</b-button></b-card-footer>
|
|
</b-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-container>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import config from "../config/config.js";
|
|
export default {
|
|
name: "editarBanner",
|
|
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>
|