diff --git a/package-lock.json b/package-lock.json
index 1d99bc3..a24fe70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2231,6 +2231,37 @@
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
diff --git a/package.json b/package.json
index 5590231..6c6fe2c 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
     "core-js": "^3.6.5",
     "jquery": "^3.5.1",
diff --git a/src/components/descripcion.vue b/src/components/descripcion.vue
index 47c116e..6185351 100644
--- a/src/components/descripcion.vue
+++ b/src/components/descripcion.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row ">
       <div class="col-md-6 col-sm-12 py-5">
-        <img v-bind:src="rutaIm" class="libro" />
+        <img :src="src" alt="" class="libro" />
         <button class="button pre">
           Previsualizar</button
         ><br /><br />
@@ -78,6 +78,8 @@
 </template>
 
 <script>
+import axios from "axios";
+import config from "../config/config.js";
 import Title from "../components/titulo.vue";
 export default {
   components: {
@@ -86,14 +88,14 @@ export default {
 
   data() {
     return {
-      titulo: "Competitive programing",
+      idLibro: "",
+      titulo: " programing",
       autor: "HALIM",
       paginas: "300",
       isbn: "POSF-12-43",
       edicion: "Primera edicion",
       precio: "$3232.00",
-      rutaIm:
-        "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
+      src: "",
       version: "Electronica",
       desc: `En relación al estudio del álgebra, las expresiones algebraicas son el conjunto de números, y por símbolos representados por letras que manifiestan un valor desconocido, siendo llamado como incógnita o variable.\n\nLos símbolos se encuentran relacionados a través de signos que indican las operaciones que se necesitan efectuar, bien sea multiplicación, suma, resta, entre otros, con el objetivo de conseguir el resultado de las variables. En este sentido, los términos se distinguen o separan por medio de signos, y en el caso de estar separadas por el signo de igualdad se llama ecuación.`,
       boton2: "Comprar",
@@ -121,6 +123,47 @@ export default {
         }
       ]
     };
+  },
+  async created() {
+    try {
+      //this.idLibro = window.localStorage.getItem("idLibro");
+      this.idLibro = 1;
+
+      let detalle = await axios.get(
+        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
+      );
+
+      detalle = await detalle.data.datos;
+
+      this.titulo = detalle.titulo;
+      this.autor = detalle.autor;
+      this.paginas = detalle.paginas;
+      this.isbn = detalle.isbn;
+      this.edicion = detalle.impresion;
+      this.precio = detalle.precio;
+      this.version = detalle.version;
+      this.desc = detalle.descripcion;
+    } catch (error) {
+      console.log(error);
+    }
+
+    try {
+      let config = {
+        // example url
+        url: `http://localhost:3000/libroImagen?idLibro=${this.idLibro}`,
+        method: "GET",
+        responseType: "blob"
+      };
+      axios(config).then(response => {
+        let reader = new FileReader();
+        reader.readAsDataURL(response.data);
+        reader.onload = () => {
+          this.src = reader.result;
+        };
+      });
+    } catch (error) {
+      console.log(error);
+    }
   }
 };
 </script>
diff --git a/src/config/config.js b/src/config/config.js
new file mode 100644
index 0000000..8589c6b
--- /dev/null
+++ b/src/config/config.js
@@ -0,0 +1,5 @@
+const config = {
+  api: "http://localhost:3000"
+  //api: "https://venus.acatlan.unam.mx/indiana_hackaton"
+};
+module.exports = config;
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..fb59300
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: "./"
+};