CODEWITHSUNDEEP
javascriptpythonjqueryhtml
James
James

Reputation: 35

How to load an image through Jquery script onto html?

I'm loading a few things onto my webpage from JSON including a description and price, but when I want to load an image URL, I cant seem to find out how I can physically load the image instead of the URL being inserted into my HTML. Do I need to create a new function or can I use it in the script or documentation line I am using which loads my image URL instead of the actual image. I know through python you use image src but I cant seem to find out how to add it in my jquery code.

for (var i = 0; i < pro.length; i++) {
     if (pro[i].name + " - Price: " + pro[i].unit_cost==  
     event.target.textContent) {
          $('#pro').html('');
          $('#pro').html(pro[i].description + pro[i].unit_cost + '</br>' +   
          pro[i].image_url);
     }
   }
})
$('#app').append(el);

I'm receiving the output of pro[i].image_url as obviously "https://randomage.jpg" instead of the actual jpg showing up which is what I'm trying to achieve.

Any help will be appreciated! Thanks!!

Upvotes: 0

Views: 51

Answers (2)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

Just create the html tags as string:

 $('#pro').html(pro[i].description + pro[i].unit_cost + '</br>' +   
          '<img src='+ pro[i].image_url + '>');

Note: concatenating long strings using + is a time consuming process. You may create an image tag first and then assign the src using jquery attr.

Upvotes: 3

amir ho3in Hashemi
amir ho3in Hashemi

Reputation: 32

var html = '';
$('#pro').html('');
$.each(pro, function( index, value ) {
    if (value.name + " - Price: " + value.unit_cost==event.target.textContent) {
        html += value.description;
        html += value.unit_cost;
        html += '</br>';
        html += '<img src="'+value.image_url+'">';
    }
});
$('#pro').html(html);

Upvotes: 0

Related Questions