Display images inside table in Vue JS along with base url (Laravel 5.2)

Question

Well, I am able to display the images properly but it is still giving me javascript errors in console for no reason. Here is my code:

Fetching categories:

fetchCategory: function(){

            this.$http.get('get_category').then(function(response){
                this.$set('categories',response.json());
            });
        }

and here is the table to display the category:

<table class="table table-bordered table-responsive table-striped example1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Category Name</th>
            <th>Icon</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="category in categories">
            <td>@{{ category.id }}</td>
            <td>@{{ category.name }}</td>
            <td><img src="{{url('/')}}/@{{ category.icon }}" width="150px"></td>
            <td>Edit | Delete</td>
        </tr>
    </tbody>
</table>

it displays the images properly, however javascript console still shows 2 404 errors indicating the url of the image GET http://localhost/project/%7B%7B%20category.icon%20%7D%7D 404 (Not Found)

Should I ignore this error? Or is there any other method to include base url in the image path?

pespantelis · Accepted Answer · 2016-07-09 12:04:16Z

3

You should bind the src attribute:

<img :src="'{{ url('/') }}/' + category.icon" width="150px">

answered Jul 9, 2016 at 12:04

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

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

Comments

Gulmuhammad Akbari · Accepted Answer · 2016-07-09 09:52:33Z

0

Try like this:

<td>{!!HTML::image('path/category.icon')!!}</td>

answered Jul 9, 2016 at 9:52

Gulmuhammad Akbari

2,0142 gold badges15 silver badges30 bronze badges

3 Comments

sazanrjb Over a year ago

category is a Vue object, can't be used like that.

Gulmuhammad Akbari Over a year ago

But you used in blading and what is the value of category.icon?

sazanrjb Over a year ago

category.icon gives a relative path like assets/images/categories/TOOZ6xW8V2JA.jpg It is displaying corretly, but is showing 404 error in console as well

Collectives™ on Stack Overflow

Display images inside table in Vue JS along with base url (Laravel 5.2)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related