Display image in vue.js

Published 7 months 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 ?

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


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



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

2.store your image PATH into database.


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.


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:


You could also use a helper method with:

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

<img :src="post.image"></img>

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