How to display images to html file using jquery? (some php and xml)

Question

I have a folder with images called " LaptopsImages ".

In my file called laptops.php i have an array list with different laptops with variables like: title, brand, price, description, spec and pictures names. My array list is convert to XML DOM tree.

On my file called product.html i wrote a code that take every product data into the variables and display it:

var title = $theProduct.find('title').text();
var brand = $theProduct.find('brand').text();
var price = $theProduct.find('price').text();
var description = $theProduct.find('description').text();
var spec = $theProduct.find('spec');
var imageFilename = $theProduct.find('picture').text();

document.getElementById("title").innerHTML=title
document.getElementById("brand").innerHTML=brand
document.getElementById("price").innerHTML=price                        
document.getElementById("description").innerHTML=description
document.getElementById("spec").innerHTML=description

I have accomplished to display every product data into my html except the pictures for each laptop. Is any way that i can display pictures with the name they have already from my variable? Assume that the pictures have names " 0001.jpg , 0002.jpg " and so on.

Every picture can be taken from: var imageFilename=$theProduct.find('picture').text();

willowis.cool · Accepted Answer · 2018-03-03 14:38:52Z

1

document.getElementById("picture").src = imageFilename

if there's a <img> tag with the id picture

answered Mar 3, 2018 at 14:38

willowis.cool

1,50013 silver badges24 bronze badges

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

3 Comments

K. Hadj Over a year ago

I have done this and i have one more problem now. My local server is trying to find the pictures but they are in a sub folder. Is any way that i can specify the way to look throw this folder? The folder is called "LaptopsImages". Also when i check from console i saw this: GET localhost:8080/0001.jpg 404 (Not Found)

willowis.cool Over a year ago

That's a problem with the method you're using to serve the images, and not the HTML or CSS or JS

K. Hadj Over a year ago

No worries. I just found the solution. Thanks for the advice.

Mohsen · Accepted Answer · 2018-03-03 14:39:54Z

1

If you use jquery you can do :

$("#picture").attr("src", imageFilename);

answered Mar 3, 2018 at 14:39

Mohsen

3073 silver badges15 bronze badges

Comments

Sreekanth Reddy Balne · Accepted Answer · 2018-03-03 14:41:07Z

0

document.getElementById('myImage').src = imageFileName;

If you need the name from the ImageFileName then you can use:

name= imageFileName.substring(0, imageFileName.length - 4);/*to chop off .JPG*/

With Jquery:

$("#myImage").attr("src", imageFilename);

answered Mar 3, 2018 at 14:41

Sreekanth Reddy Balne

3,4241 gold badge20 silver badges48 bronze badges

Comments

Shakil Hossain · Accepted Answer · 2018-03-03 20:03:37Z

0

document.getElementById("price").innerHTML= "<img src=\"" + imageurl+ "\">";

You can use this code to display a complete image in inner div where div id is price

answered Mar 3, 2018 at 20:03

Shakil Hossain

1,75114 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to display images to html file using jquery? (some php and xml)

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related