Carrusel incompleto

src/components/carrusel.vue

@@ -5,53 +5,66 @@
       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">
-          <img
-            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div>
-        <div class="carousel-item">
-          <img
-            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div>
-        <div class="carousel-item">
-          <img
-            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div>
-      </div>
-      <a
-        class="carousel-control-prev"
-        href="#carouselExampleControls"
-        role="button"
-        data-slide="prev"
-      >
+      <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"
-      >
+      <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>
-export default {};
+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>

src/components/descripcion.vue

@@ -103,24 +103,18 @@ export default {
       Libros: [
         {
           id: 0,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         },
         {
           id: 1,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         },
         {
           id: 1,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         }
       ]
     };
@@ -176,22 +170,19 @@ export default {
       console.log(`${similares}`);
       for (let i = 0; i < similares.length; i++) {
         this.Libros[i].title = similares[i].titulo;
-         let config = {
-        // example url
-        url: `http://localhost:3000/libroImagen?idLibro=${i+2}`,
-        method: "GET",
-        responseType: "blob"
-      };
-      await axios(config).then(response => {
-        let reader = new FileReader();
-        reader.readAsDataURL(response.data);
-        reader.onload = () => {
-          this.Libros[i].img = reader.result;
+        let config = {
+          // example url
+          url: `http://localhost:3000/libroImagen?idLibro=${i + 2}`,
+          method: "GET",
+          responseType: "blob"
         };
-      });
-
-
-
+        await axios(config).then(response => {
+          let reader = new FileReader();
+          reader.readAsDataURL(response.data);
+          reader.onload = () => {
+            this.Libros[i].img = reader.result;
+          };
+        });
       }
     } catch (error) {
       console.log(`Ocurrio un error ${error}`);

src/view/libroDescripcion.vue

@@ -11,7 +11,7 @@
 
 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../components/navPrincipal.vue";
+import Nav from "./../esteticas/nav.vue";
 import Descrip from "./../components/descripcion.vue";
 import Footer from "./../components/footer.vue";