Display image in vue.js

Published 1 month ago by afoysal

I am trying to develop a SPA. In this regard I am using vue.js 2 in front end and Laravel 5.5 API in back end. Now I would like to display images in front end. I wrote below code in HTML

<img :src="/images/addressObj.image"/>

Where should I put images in Laravel and how can I access that image in vue.js ?

MaverickChan
<img :src="'/images/' + addressObj.image"/>

afoysal

Thanks @MaverickChan . Where should I put images in Laravel ?

MaverickChan

@afoysal

  1. store your image FILE at some path on your server.

2.store your image PATH into database.

afoysal

Thanks @MaverickChan for your reply. I am trying to access like this http://localhost:8000/assets/images/default.jpg .But I can't see the image in the browser. Thanks.

burlresearch

Your localhost:8000 is pointing to the index.html file in /public from your project root directory.

So to store the image, such that localhost:8000/assets/images/default.jpg will work, it would have to sit in a directory:

{proj_root}/public/assets/images/default.jpg

You could also use a helper method with:

$url = asset('assets/images/default.jpg');

Please sign in or create an account to participate in this conversation.