Retrieve multiple images using jquery

Question

I am trying to retrieve multiple / single images from DB using jquery. as per the way I tried, I am receiving only the first image. The rest are not visible.

For saving multiple images I am using comma after to separate. EX: saved 2 imaged named x.jpg and y.jpg, The image name will be saved in the column as x.jpg,y.jpg and image will be uploaded to the folder.

var image_DB = data[0].pimage; //FROM DB COLUMN
var upload_dir = "../uploads/"; //IMAGE PATH
var img = document.createElement("IMG");
img.height = 90;
img.weight = 90;
                    
if(image_DB !== ''){ //IF IMAGE COLUMN HAS A VALUE || IMAGE
   if(image_DB.includes(',') !== false){ //IF THE COLUMN CONTAINTS MULTIPLE IMAGES
      console.log('Multiple Images Here');
      var image = image_DB.split(',');//SPLITTING IT WITH COMMA -1
      $.each(image, function(key, value){ //ITERATING VALUES TO FIND FILE NAME
           img.src = upload_dir+value; //UPDATING IMAGE SOURCE
      });
    }else{//IF THE COLUMN CONTAINTS ONE IMAGE WITHOUT COMMA
       console.log('Single Image Here');
       img.src = upload_dir+image_DB;
    }
}else{ //IF NO IMAGE EXISTS
   console.log('Nothing is in DB');
}
$('#preview').prepend(img);

Where am I making the mistake? Please suggest.

The way its done in PHP is

if($row['pimage'] !== ''){
   if(strpos($upload_dir.$row['pimage'],',')!== false){
        $image = explode(',',$row['pimage']);
        $imageArr = '';
        foreach ($image as $im){
           $imageArr .= '<img src="'.$upload_dir.$im .'"width="150" height="150"/>';
        }
   }
   else{
       $imageArr = '<img src="'.$upload_dir.$row['pimage'].'"width="150" height="150"/>';
   } 
}else{
   $noImage = 'No Image.jpg';
   $imageArr = '<img src="'.$upload_dir.$noImage.'"width="150" height="150"/>';
}

If there are multiple images in your database, you will need to create a seprate img tag for each of them. What happens now is that you create one image, and change it's src attribute multiple times, this will naturally only lead to one image being displayed. — Smurker
– Smurker, Commented Jul 28, 2021 at 13:06
why cant we loop through one img tag? I have achieved this in PHP and now I am rewriting it on Jquery. — Roshan Zaid
– Roshan Zaid, Commented Jul 28, 2021 at 13:10
HTML and PHP are completely different things. In HTML the img tag represents one single image. You can of course change the src attribute dynamically which will cause the image to change as well. But you can not have multiple images showing at the same time with only one img tag. — Smurker
– Smurker, Commented Jul 28, 2021 at 13:12
I agree with what you are saying. I have edited the question to show how it is done in PHP using html tags. — Roshan Zaid
– Roshan Zaid, Commented Jul 28, 2021 at 13:18
Your php foreach creates a new element for each instance. The .= keeps adding to the html string every iteration — charlietfl
– charlietfl, Commented Jul 28, 2021 at 13:20

Seti · Accepted Answer · 2021-07-28 13:10:21Z

You have only one img object and you assign it multiple images, so only one will be displayed

var image_DB = data[0].pimage; //FROM DB COLUMN
var upload_dir = "../uploads/"; //IMAGE PATH
                    
if(image_DB !== ''){ //IF IMAGE COLUMN HAS A VALUE || IMAGE
   if(image_DB.includes(',') !== false){ //IF THE COLUMN CONTAINTS MULTIPLE IMAGES
      console.log('Multiple Images Here');
      var image = image_DB.split(',');//SPLITTING IT WITH COMMA -1
      $.each(image, function(key, value){ //ITERATING VALUES TO FIND FILE NAME
           var img = document.createElement("IMG");
           img.height = 90;
           img.weight = 90;
           img.src = upload_dir+value; //UPDATING IMAGE SOURCE
           $('#preview').prepend(img);
      });
    }else{//IF THE COLUMN CONTAINTS ONE IMAGE WITHOUT COMMA
       console.log('Single Image Here');
       var img = document.createElement("IMG");
       img.height = 90;
       img.weight = 90;
       img.src = upload_dir+image_DB;
       $('#preview').prepend(img);
    }
}else{ //IF NO IMAGE EXISTS
   console.log('Nothing is in DB');
}

Here you have example of multiple images added.

Collectives™ on Stack Overflow

Retrieve multiple images using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related