how to add value on append javacript laravel-CodePudding

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 px-3 py-2">'  
                                '<div >'  

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

                                '<div >'  
                                '<div ><h3><a href="/product-detail/'  
                                value.pi_id   '">'  
                                value.pc_name  
                                '</a></h3></div>'   //end category
                                '<a href="/product-detail/'   value
                                .pi_id  
                                '"><div ><ins><small>From </small>'  
                                parseInt(value.sp_price)
                                .toLocaleString()  
                                '<ins></div></a>'  
                                '</div>'  

                                '</div>'  
                                '</div>'  
                                '</div>'
                            ); });

CodePudding user response：

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