javascript - 在 Laravel 5.4 中使用 ajax 附加从数据库检索图像

Question

我正在使用 ajax 请求从我的数据库获取数据。现在我将所有数据附加到我的 div 中。现在我的图像源遇到问题。我将图像文件放在名为 image_files 的公共(public)文件夹中。我的问题是通过源检索图像，并将其与 ajax 中数据库中的图像文件名连接

这是我的代码:

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>')
                    }
                }
            }
            });
        }

我的问题是这部分:

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

请帮忙。

Answer 1

{{}} 中的代码被评估为 Laravel 的系统变量，因此您不能在其中混合 JavaScript。

$('#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>');

这应该可以达到你的目的，或者至少让你走上正确的道路。