Question 66321 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to give the src to image tag in jquery success function in loop?

This is my success function of jQuery. Everything is fine but I don’t know how to give url to the image tag. I am doing it like this but it is not showing image.

success: function (data) {
                if (data.data.length > 0) {
                    var html = "";
                    for (var i = 0; i < data.data.length; i++) {
                        html +=
                            `<div class="col-md-4 content_box">
                    <div class="card" style="width: 20rem;">
                        <img class="card-img-top" src="{{url('all_images/model_logos/ ` +
                            data.data[i].model_image +
                            `')}}" >
                        <div class="card-body">
                            <p class="card-text"><b>MAKE:</b>` +
                            data.data[i].make_id +
                            `</p>
                            <p class="card-text"><b>Model:</b>` +
                            data.data[i].model +
                            `</p>
                            <p class="card-text"><b>model ar:</b>` +
                            data.data[i].model_ar +
                            `</p>
                        </div>
                    </div>
                </div>`;
                    }

can anybody tell me how to give url there I am stuck ?

Tags:

2

Answers


  1. 0

    Try moving the closing braces before adding data.data[i].model_image to the src:

    <img class="card-img-top" src="{{ url('all_images/model_logos/') }}` + data.data[i].model_image + `" >
    Login or Signup to reply.
  2. 0

    It looks like you are using Laravel’s blade template syntax ({{ url(‘all_images/model_logos/’) }}) within a JavaScript string. Since this syntax is processed on the server-side by Laravel, it won’t work within your JavaScript code.

    Like the answer above me said, you should place the data.data[i].model_image outside of the url function. Changed my answer accordingly.

    Can you try to concat the URL string like this:

    <img class="card-img-top" src="{{ url('all_images/model_logos') }}/${data.data[i].model_image}">

    It should process the correct image source as the src attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search