how to add value on append javacript laravel

Viewed 33

I want to make the image dynamic, how can I insert the value in the jquery append, and is it correct to write html like this? if wrong please tell me the correct way to write

i try to create like this but still no show image

<img src="{{ asset('assets/frontend/product/thumb/"+img+".jpg') }}">

this is my script

                          $.each(data, function(key, value) {
                            var price = parseInt(value.sp_price);
                            var img = value.pf_code;

                            $(".filter_data").append(
                                '<div class="product>' +
                                '<div class="px-3 py-2">' +
                                '<div class="grid-inner card2 m-0">' +

                                '<div class="product-image img-script">' +
                                '<a href="/product-detail/' + value
                                .pi_id +
                                '"><img src="{{ asset('assets/frontend/product/thumb/thumb_table123.jpg') }}"></a>' +
                                '</div>' + //end image

                                '<div class="product-desc center">' +
                                '<div class="product-title"><h3><a href="/product-detail/' +
                                value.pi_id + '">' +
                                value.pc_name +
                                '</a></h3></div>' + //end category
                                '<a href="/product-detail/' + value
                                .pi_id +
                                '"><div class="product-price price-script"><ins><small>From </small>' +
                                parseInt(value.sp_price)
                                .toLocaleString() +
                                '<ins></div></a>' +
                                '</div>' +

                                '</div>' +
                                '</div>' +
                                '</div>'
                            ); });
1 Answers

Before blade processes

<img src="{{ asset('assets/frontend/product/thumb/"+img+".jpg') }}">

After Blade processes

<img src="http://exmaplle.test/assets/frontend/product/thumb/"+img+".jpg">

This will be an issue in js as the double quote will mess things up what you should instead be doing is using template literals https://www.w3schools.com/js/js_string_templates.asp

<img src="{{ asset('assets/frontend/product/thumb/${img}.jpg') }}">

This will now be able to get the img variable from context

You may also want to consider putting the html in a <template> https://www.w3schools.com/tags/tag_template.asp and moving your js to a separate file. if the only reason you want the js in blade is for the asset function to get your sites url, you can set that with <base> https://www.w3schools.com/tags/tag_base.asp



I am not seeing the use of the img tag in your script, if this answer isn't helpful consider posting your full code

Related