es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtener imagen desde la carpeta del servidor y mostrar la imagen en Vue

01 Aug, 2023 Programación

Estoy intentando mostrar una imagen desde la carpeta pública de mi directorio de APIs de Node. Quiero mostrar la imagen en el archivo Front End de Vue. No sé cómo dar la ruta de la imagen.

Este es el directorio donde quiero mostrar la imagen: nodelogin.png

Quiero mostrar estas imágenes.

<img :src="myimage" alt="Logo" width="80" height="80">

Este es el código de mi plantilla.

async created() {
    this.myimage = await this.getImage();
},
methods: {
    async getImage(){
        return await 'http://localhost:4000/api/public/nodelogin.png';
    }
}

Pero este código devuelve un error de respuesta: Cannot GET /api/public/nodelogin.png
En realidad, soy nuevo en Node y Vue, así que no estoy seguro si mi lógica es correcta o no.

¿Necesito hacer algo desde mi backend?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, debes asegurarte de que tu backend esté sirviendo tus imágenes en el directorio correcto y que tu aplicación frontend Vue.js pueda acceder a ellas. Estos son los pasos que puedes seguir para asegurarte de que todo esté configurado correctamente:

    1. Coloca la imagen que deseas mostrar en un directorio al que tu aplicación Node.js pueda acceder. En este caso, ya has colocado la imagen en el directorio public de tu API Node.js.

    2. Asegúrate de que tu aplicación Node.js esté configurada para servir archivos estáticos desde el directorio public. Puedes utilizar el middleware express.static() para lograr esto. Aquí tienes un ejemplo:

      const express = require('express');
const app = express();

app.use(express.static('public'));

// Tus otras rutas y middleware aquí

app.listen(4000, () => {
 console.log('Servidor escuchando en el puerto 4000');
});

      Este código indica a tu aplicación que sirva archivos estáticos desde el directorio public. Con esta configuración, deberías poder acceder a los archivos en ese directorio a través de una URL como `http://localhost:4000/nodelogin.png`.

    3. En tu aplicación Vue.js, asegúrate de que estás solicitando la imagen en la URL correcta. Puedes utilizar una propiedad computada para generar la URL en función del nombre de host y puerto actual, de la siguiente manera:

      <template>
 <img :src="imageUrl" alt="Logo" width="80" height="80">
</template>

<script>
export default {
 computed: {
   imageUrl() {
     return `http://${window.location.hostname}:4000/nodelogin.png`;
   },
 },
};
</script>

      Este código genera la URL de la imagen utilizando el nombre de host y puerto actuales. Ten en cuenta que esto asume que tu aplicación Vue.js se está sirviendo desde la misma máquina que tu aplicación Node.js, por lo que utiliza window.location.hostname para obtener el nombre de host correcto.

    Con estos pasos implementados, tu aplicación Vue.js debería poder mostrar la imagen desde el directorio public de tu aplicación Node.js.

Comments are closed.