javascript - 在 JavaScript 中使用 Assets 的图像路径

Question

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

<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 和为 anchor 标记设置 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">';