Zeigen Sie Bilder in Tabelle in Vue JS zusammen mit Basis-URL (Laravel 5.2)

Question

Nun, ich bin in der Lage, die Bilder richtig anzuzeigen, aber es gibt mir immer noch Javascript-Fehler in der Konsole ohne Grund. Hier ist mein Code:

Fetching Kategorien:

fetchCategory: function(){ 

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

und hier wird die Tabelle der Kategorie anzuzeigen:

<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> 

es zeigt die Bilder richtig, aber JavaScript-Konsole zeigt noch 2 404 Fehler Angabe der URL des Bildes GET http://localhost/project/%7B%7B%20category.icon%20%7D%7D 404 (nicht gefunden)

Sollte ich diesen Fehler ignorieren? Oder gibt es eine andere Methode, Basis-URL in den Image-Pfad aufzunehmen?

Answer 1

Sie sollten das src Attribut binden:

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

Answer 2

Versuchen wie folgt aus:

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