retrieving image from database with ajax append in Laravel 5.4

Question

i am using an ajax request to get data from my database. Now i append every data into my div. Now i am having a problem in my image source. I put my image files in public folder name image_files. My problem is retrieving the image thru source and con-cat it with image filename from database in ajax

Here is my code:

function getProducts(category_id) {
    $("#product-list").empty();
    $.ajax({
        url:"{{ url('product') }}/" +category_id,        
        type:"GET",
        dataType: "JSON",        
            success: function(data) {
                if(data.length>0) {
                    for(i=0;i<data.length;i++) {                        
                        $('#product-list').append('<div class="col-md-3 col-sm-3 hero-feature">'+'<div class="thumbnail">'+'<img src="{{ asset('image_files/' . '+data[i]['featured_img']+') }}" alt="">'+'</div>')
                    }
                }
            }
            });
        }

my problem is this part:

<div class="thumbnail">'+'<img src="{{ asset('image_files/' . '+data[i]['featured_img']+') }}" alt="">'+'</div>'

please help.

Answer 1

The code inside {{}} is evaluated as system variables for laravel, and thus you cannot mix javascript inside it.

$('#product-list').append('<div class="col-md-3 col-sm-3 hero-feature"><div class="thumbnail"><img src="{{ url('image_files/') }} ' + data[i]['featured_img'] +'" alt=""></div>');

That should probably do your trick, or atleast put you on the right path.