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

时间:2019-04-10 10:13:02

标签: javascript laravel

我的数据库中有一个存储的路径。现在,我想根据数据库中存储的路径显示图像。这与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

1 个答案:

答案 0 :(得分:0)

尝试一下

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

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