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?

does <img src="http://localhost:4000/api/public/nodelogin.png" alt="Logo" width="80" height="80" /> work? — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 3, 2022 at 8:22

hisablik · Accepted Answer · 2022-01-03 09:50:05Z

1

Just use the url '/nodelogin.png'

answered Jan 3, 2022 at 9:50

hisablik

1112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hisablik Over a year ago

also you dont need to the getImage() method

Kevin · Accepted Answer · 2022-01-05 01:14:37Z

0

Thanks for your question posting.

If you want see png, you should input url :

http://localhost:4000/nodelogin.png

Good luck for your business.

answered Jan 5, 2022 at 1:14

Kevin

531 silver badge8 bronze badges

Collectives™ on Stack Overflow

Get image from server side folder and display image in Vue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related