is there a way to display images in other php page?

Question

I hope i am going to be clear with my problem. I am working on a project where I need to annotate images of vials with defects. I am at the stage where i have created a folder which contains the image's paths and is created based on the batch number. So each folder will be named differently dependig on the batch number. Now once all the images are uploaded, i want to retrieve them by running some queries so i get displayed in thumbnails all the images related to that batch. Now comes the tricky part (at least for me). I want to be able to click to the thumbnail and get redirected to the test.php page where i can see the image bigger, put in onto a canvas and make some annotation, but for some reason i am not able to retrieve the images. I am really desperate, any help would me much appreciated

<?php



require('db.php');

if (isset($_POST['mostra'])) {
    
    $batch_number = stripslashes($_REQUEST['batch_number']);
    $batch_number = mysqli_real_escape_string($con, $batch_number);
    $product_name = stripslashes($_REQUEST['product_name']);
    $product_name = mysqli_real_escape_string($con, $product_name);
    $vial_size = stripslashes($_REQUEST['vial_size']);
    $vial_size = mysqli_real_escape_string($con, $vial_size);
    $Sterile = $_POST['Sterile'];
    $Macchina = $_POST['Macchina'];
   
 
    if (!empty($batch_number)) {

        $select = mysqli_query($con, "SELECT vial_image FROM info_flaconi WHERE batch_number = '$batch_number' ");
        if(mysqli_num_rows($select)) {
        
            while($row=$select->fetch_assoc()){
              
                
                echo
                
                "<a href=\"test.php?vial={$row['vial_image']}\" ><img src=\"immagini/$batch_number/" .$row['vial_image']. "\" style = 'width: 100px; height: 100px; padding:10px;'></a>";
              
                 
            }    
            
        
        }else{
            echo '<p style="color: white;"> No data available </p>';
        }      
    }
}  

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Import Immagini</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style_3.css">
 
</head>
<body>

<header>

    <div class="wrapper">
        <div class="logo">
            <img src="biotech.png" alt="">
        </div>
    <ul class="nav-area">
    <li><a href="dashboard.php">Home</a></li>
    <li><a href="table/index.html">Contatti</a></li>
    <li><a href="logout.php">Logout</a></li>
    </ul>
    </div>   
    <div class = "caricamento">
    <form action="" method="POST" enctype="multipart/form-data">
            
            <label> carica immagini flaconi: </label>                      
         
            <label> Inserisci numero batch: </label><input type = "text" name= "batch_number" placeholder="batch number">                 
                        
            <label> Inserisci prodotto: </label><input type = "text" name= "product_name" placeholder="product name">
                                             
            <label> Inserisci grandezza flacone: </label><input type = "text" name= "vial_size" placeholder="vial size">
                       
            <input type="submit" name="mostra" value="Mostra flaconi">
            <select name= "Sterile">
                <option value="" >--Select--</option>
                <option value="Sterile Area 1" >Sterile Area 1</option>
                <option value="Sterile Area 2" >Sterile Area 2</option>
                <option value="Sterile Area 3" >Sterile Area 3</option>
                <option value="Sterile Area 4" >Sterile Area 4</option>
                <option value="Sterile Area 5" >Sterile Area 5</option>
                <option value="Sterile Area 6" >Sterile Area 6</option>
                <option value="PDS" >PDS</option>
            </select>
            
            <select name= "Macchina">
                <option value="" >--Select--</option>
                <option value="Sedeneider" >Sedeneider</option>
                <option value="Groheninger" >Groheninger</option>
                <option value="Optrel400" >Optrel400</option>
            </select>     

    </div>    

    </form>
    <?php include 'scegli_immagine.php';?>   

</header>
</body>
           
</html>

The above code is needed in order to fetch all the images in thumbnails and be able to click on them

<?php 

require('db.php');
include('upload.php');

$result=$_GET['vial'];
echo "<img src = \"immagini/$batch_number/".$result."\" style = width: 20%; height: 45%; position: relative; top: -260px; right:-180px;>";



if (isset($_REQUEST['submit'])) {
    $difetto = stripslashes ($_REQUEST['difetto']);
    $difetto = mysqli_real_escape_string($con, $difetto);
    $commenti = stripslashes($_REQUEST['commenti']);
    $commenti = mysqli_real_escape_string($con, $commenti);
    $query    = "INSERT INTO `annota` (difetto, commenti) VALUES ('$difetto', '$commenti')";
    $result   = mysqli_query($con, $query);
    if ($result) {
      echo "<div class='form'>
            <h3>Annotazione registrata correttamente</h3><br/>
            <p class='link'>Clicca qui per una nuova <a href='scegli_immagine.php'>annotazione</a>.</p>
            </div>";
    } else {
        echo "<div class='form'>
                <h3>Qualcosa è andato storto.</h3><br/>
                <p class='link'>Clicca qui per <a href='scegli.php'>riprovare</a> di nuovo.</p>
                </div>";
    }
}
   
?>


</header>

</body>
</html>

With this bit of code i am trying to display the image bigger but with no success

Your code is vulnerable to **sql injection** so use only **prepared statements with parameters** see https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php — nbk, Feb 06 '22 at 16:50

Rick James · Answer 1 · 2022-02-07T06:11:01.937

This forum is not targeted for such a broad question, but here goes. Come back when you have something more specific.

Write a web page that helps the user load a 'batch' into a directory. (PHP has the functions for such.) This page should create file names for each image.
Run through the files to build images to build thumbnails. (See the image* routines.) Suggest putting the thumbnails in the same directories, but with slightly different names. (A suggestion: prefix the file name with t for thumbnail.)
Write another web page to show the list of batches; the user picks one; then the page shows the thumbnails in that batch.
The user picks a thumbnail and arrives at a page to allow annotation of the full image. This may involve a 'canvas' with a background image (the file). I don't know the details of how to annotate, but canvas has lots of capability.
Upon clicking a button, the canvas is written to a new file somewhere.

Steps 4 and 5 may be better done by some image editing produce -- "gimp" or any of several others.

I assumed that it is trivial to bring up an image in the 'next' page in a sequence, as your title asks about. Here is a little more detail on it:

On the page where you click, say, a thumbnail, you use something like this once per image:

<a href=step5.php?pic=t1234.jpg>
    <img src=t1234.jpg>
</a>

I suggest stringing out the thumbnails using

<my-wrap style='display:flex; flex-wrap:wrap'>
   ((many anchors and imgs as above))
</my-wrap>

is there a way to display images in other php page?

1 Answers1