image path using asset in JavaScript

Question

I have a stored path in my database. Now I want to show images according to the path stored in the database. This works well with HTML and Laravel. But when appending using Javascript, the path is incorrect.(js file is in public folder).asset() and url() function of laravel will not parse in html as they are of blade page.

<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>

Tried a few things.

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

How do I set the src for image and href for anchor tag in javascript where href is path to route

image path is like localhost:8080/MyProject/public/{{url(/IMAGES/image.png)}} it should be like this instead localhost:8080/MyProject/public/IMAGES/image.png

Your <a class='thumbnail is not closed. Whats the value of prodPath? — Eddie
– Eddie, Commented Apr 10, 2019 at 10:16
I think you are mixing frontend and backend. The url() function is laravel function(i think) and you are concatenating it in javascript variable prodPath? — Eddie
– Eddie, Commented Apr 10, 2019 at 10:21
i know url i used with laravel but i need something like that in javascript so that i can get image path from database and display the image that is stored in the folder.Is there any way around.Also not able to call the route using anchor tag — Rahul Baraiya
– Rahul Baraiya, Commented Apr 10, 2019 at 10:26
And is a prodPath javascript variable. What is the example value of prodPath ? — Eddie
– Eddie, Commented Apr 10, 2019 at 10:27
eddie..prodid and product path are from database. The problem is i am not getting the proper path both in anchor tag href and image src — Rahul Baraiya
– Rahul Baraiya, Commented Apr 10, 2019 at 10:28

Srinivasan Sekar · Accepted Answer · 2019-04-10 14:20:07Z

1

Try this,

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

and

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

edited Apr 10, 2019 at 14:20

answered Apr 10, 2019 at 12:53

Srinivasan Sekar

2,10715 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rahul Baraiya Over a year ago

brother its not php variable it is javascript variable

Srinivasan Sekar Over a year ago

Edited my answer

Rahul Baraiya Over a year ago

already tried this.Not Obtain Valid Path. my js file is in public folder and images are also in public folder

Srinivasan Sekar Over a year ago

what is the value of prodPath and url(prodPath)

Rahul Baraiya Over a year ago

src="IMAGES/images.png".see my laravel blade code i want same thing using javascript

|

Collectives™ on Stack Overflow

image path using asset in JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related