html - How do I show just the first image from mysql database in php

Solution:

You just need to update your SQL query, just add LIMIT 1. This will limit the result just to 1 record and as you have ORDER id ASC, it will show the first record of the given user (as per you it is 0).

$query = "SELECT * FROM images WHERE user = 0 ORDER BY id ASC LIMIT 1;";
Copy code

Solution:

A quick and dirty solution is to save your first image in some separate variables, for example like this:

$isFirst = true;
$firstImageSrc = "";
$result = ....;
while (...) {
   // set your $product, $room etc here
   if ($isFirst) {
      $isFirst = false;
      $firstImageSrc = $src;
   }
}
echo ...
?>
</div> <!-- close imgWheel -->   

<!-------- Large Image Display------- -->

<div id="display">
     <img  id="mainImage" src="<?php echo $firstImageSrc ?>" /> 
</div>
Copy code

A much more elegant solution would be to create an array with all your images, so that you can separate your php from your html. I will refactor your code below, and fix your first image problem as well:

<?php
   $images = [];
   $idx = 0;
   $query = "SELECT * FROM images WHERE user = 0 ORDER BY id;";
   $result = $mysqli->query($query);
   while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
      $images[$idx]["product"] = $row["product"];
      $images[$idx]["room"] = $row["room"];
      $images[$idx]["style"] = $row["style"];
      $images[$idx]["tags"] = $row["tags"];
      $images[$idx]["src"] = $row["url"];
      $images[$idx]["dataid"] = $row["id"];

      $images[$idx]["imgClass"] = "";
      if (in_array($src, $favourites)) {
         $images[$idx]["imgClass"] = " favourite";
      }
      $idx++;
   }
?>

<div id="imgWheel" class="treatmentContainer">

<?php foreach ($images as $image) { ?>
   <div class='treatment<?=$image["imgClass"]?>' data-url='<?=$image["src"]?>' data-product='<?=$image["product"]?>' data-room='<?=$image["room"]?>' data-style='<?=$image["style"]?>' data-tags='<?=$image["tags"]?>' data-number='<?=$image["dataid"]?>' id='pic_<?=$image["dataid"]?>' >
      <img src='<?=$image["src"]?>' crossorigin='anonymous'/>
   </div>
<?php } ?> 
                    
</div> <!-- close imgWheel -->   

<!-------- Large Image Display------- -->

<div id="display">
     <img id="mainImage" src="<?=$images[0]["src"]?>" /> 
</div>
Copy code

Solution:

Since you have all of that in yourWHILE statement, I assume you want toecho all those records. And then at the end show the 1st pic. So for the "Large Image Display," give this a try:

<div id="display">
     $query = "SELECT * FROM images WHERE user = 0;";
     $result = $mysqli->query($query);
     $row = $result->fetch_array(MYSQLI_ASSOC)
     $src = $row["url"];
     <img  id="mainImage" src="<?php echo $src ?>" /> 
</div>
Copy code

If you'd like less code, then save the value of$src inside yourWHILE loop whenuser=0 into some other variable like$src2. And then your code simply becomes:

<img  id="mainImage" src="<?php echo $src2 ?>" />
Copy code