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

Solution:

Your result set is alreadyx ordered by id, so you need only a variable, to be filled once with the first imageurl

<div id="imgWheel" class="treatmentContainer">
<?php
    $bigpictureurl = "";
    $query = "SELECT * FROM images WHERE user = 0 ORDER BY id;";
    $result = $mysqli->query($query);
       while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
         $product = $row["product"];
         $room = $row["room"];
         $style = $row["style"];
         $tags = $row["tags"];
         $src = $row["url"];
         $dataid = $row["id"];
         if (empty($bigpictureurl)) {
             $bigpictureurl = $src ;
         }          
          $imgClass = "";
           if (in_array($src, $favourites)) {
               $imgClass = " favourite";
           }
                    
echo "<div class='treatment$imgClass' data-url='$src' data-product='$product' data-room='$room' data-style='$style' data-tags='$tags' data-number='$dataid' id='pic_$dataid' >";
echo "<img src='$src' crossorigin='anonymous'/>";
echo "</div>";
}
?>   
                    
</div> <!-- close imgWheel -->   

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

<div id="display">
     <img  id="mainImage" src="<?php echo $bigpictureurl ?>" /> 
</div>

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;";

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>

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>

Solution:

Since you have all of that in your WHILE statement, I assume you want to echo 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>

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

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