Get image from server side folder and display image in Vue

Question

I'm trying to display image from public folder of my node api directory. I want to display image in front end vue file. I don't know how to give source of image.

This is the directory. I want to display image nodelogin.png

I want to display these images.

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

This is my template code.

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

But this code gives an error response. Cannot GET /api/public/nodelogin.png Actually I'm new to node and Vue So I'm not sure whether my logic is correct or not.

Do I need to do something from my backend side?

Answer 1

Just use the url '/nodelogin.png'

Answer 2

Thanks for your question posting.

If you want see png, you should input url:

http://localhost:4000/nodelogin.png

Good luck for your business.