[Vuejs]-How can I show image from express server on Vue app?

by

0👍

If you have correct paths to the images in your database you simply render them with an tag. Make sure the path to the file is complete, or relative to your static assets folder.

In your case the path seems to be some mix of static/uploads/hash and the filename problem.png.

This means the full url to the file is most likely something like:

domain.com/static/uploads//.png. The domain.com part will most likely be localhost: if you are working locally. On a production server this will be your domain you are hosting your app on.

PS. your second image is a full file path on your system, this wont be visible on a server.

0👍

So you have this static folder.

If you are not already serving this static folder with express, see this explanation on how to serve a static folder.

Once you fetch your image in the frontend you will have an image object something like this:

{
     "id": 1,
     "fileName": "problem.png",
     "mimeType". "image/png",
     "caseId: 2,
     "path": "static/uploads/abcdefg.......png"
}

Your img tag in your html file should look as follows.

<img src="http://localhost:{PORT_OF_EXPRESS_SERVER}/static/uploads/abcdefg.........png"/>

Because you’re using vue.js here is an example with axios.

MyComponent.js


import axios from 'axios';
export default {
    data: () => {
         return {
              imageUrl: ''
         }
    },
    mounted(): async () => {
         // this route here must match what you defined in your backend
         const { data } = await axios.get('/image/2/5')
         console.log(data);
         /** {
             "id": 1,
             "fileName": "problem.png",
             "mimeType". "image/png",
             "caseId: 2,
             "path": "static/uploads/abcdefg.......png"
             } **/

         // now we set the imageUrl, assuming your express port is 1337
         this.imageUrl = `http://localhost:1337/${data.path}`; 
    }
}

MyComponent.html

<template>
    <div id="my-component">
         <img :src="imageUrl"/>
    </div>
</template>
<script src="./MyComponent.js"></script>

Leave a comment