在 JavaScript 中使用资产的图像路径

Question

我的数据库中有一个存储路径。现在我想根据存储在数据库中的路径显示图像。这适用于 HTML 和 Laravel。但是使用Javascript追加时，路径不正确。（js文件在公共文件夹中）。laravel的asset（）和url（）函数不会在html中解析，因为它们是刀片页面。

<div id="diFproD">
    @php $index=0; @endphp @for($i=0;$i < count($productDetails);)
        <div class="row">
            @for($j=0;$j < 4; $j++)
                <div class="col-lg-3 col-md-4 col-xs-5 thumb">
                    <a class="thumbnail"
                       href="{{url('/product/macchi-product-sapCode-'.$productDetails[$i]['ProductName'].'-'.$productDetails[$i]['ProductId'])}}"
                       style="box-shadow: 0px 1px 3px 3px #337ab724">
                        <img src="{{asset($productDetails[$i]['ProductPath'])}}" class="img-rounded"/>
                        <p>Para 1 Test 1</p>
                        <p>Para 1 Test 1</p>
                    </a>
                </div>
                @php $i++;if($i == count($productDetails)){ break; } @endphp
            @endfor
        </div>
    @endfor
</div>

尝试了一些东西。

var cntProd = data.length;
$('#diFproD').empty();
var rowDivPro = '';
for (var i = 0; i < cntProd;) {
    rowDivPro += '<div class="row">';
    for (var j = 0; j < 4; j++) {
        var prodId = data[i].ProductId;
        var prodWeit = data[i].ProductWeight;
        var prodName = data[i].ProductName;
        var prodPath = data[i].ProductPath;
        var custLoc = '{{ url("/product/macchi-product-sapCode-" }}';
        rowDivPro += '<div class="col-lg-3 col-md-4 col-xs-5 thumb">';
        rowDivPro += "<a class='thumbnail' href='"
            + custLoc
            + prodId
            + "' style='box-shadow:0px 1px 3px 3px #337ab724'>";
        rowDivPro += '<img src="{{url(' + prodPath
                                + ')}}" class="img-rounded">';
        rowDivPro += '<p>Para 1 Test 1</p><p>Para 1 Test 1</p>';
        rowDivPro += '</a>';
        rowDivPro += '</div>';
        i++;
        if (i == cntProd) {
            break;
        }
    }
    rowDivPro += '</div>';
}
$('#diFproD').append(rowDivPro);

如何在javascript中为图像设置src，为锚标记设置href 其中 href 是路由路径

图片路径类似于localhost:8080/MyProject/public/{{url(/IMAGES/image.png)}} 它应该是这样的而不是localhost:8080/MyProject/public/IMAGES/image.png

Answer 1

试试这个，

    var prodPath = '"'+{{url("'"+data[i].ProductPath+"'")}}+'"';

和

rowDivPro += '<img src="'+prodPath+'" class="img-rounded">';