How do I display random images from my database?

Question

I am currently creating a program which displays random images from a click event.

I have code which should (but currently isnt) display random images from a folder of mine however, I have these images uploaded in my database instead (defined as large blobs). I would like to randomly output these images from my database instead (with the use of MySqli of course).

How can I approach this?

My current code at the moment is :

JS:

    var myImg = ["fruit1.jpg", "fruit2.jpg", "fruit3.jpg", "fruit4.jpg", "fruit5.jpg", "fruit6.jpg"];



//create a function named displayImage
//it should not have any values passed into it

var inputs = document.querySelectorAll('input');

for(var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {
    var num = Math.floor(Math.random() * 12);
    this.nextElementSibling.src = myImg[num];
  })
}

Example of the relevant html code:

<div class="boxa">A1
    <input type=button value="Display Random Image">
    <img src="config.php" name="canvas" />
</div>

Answer 1

As many of us observed, you're currently using javascript to retrieve items/data from the database. There are two ways for you to get the image in your database. First is to get rid of your javascript and retrieve data using PHP, or use third-party js plugin like AJAX so you could still retrieve data using javascript. The difference is, AJAX doesn't reload the entire page. But since, you didn't tag AJAX in your question, we could do it in php.

index.php

<?php
  ... //Connection to database
  session_start();
  $_SESSION['ctr'] = ((isset($_SESSION['ctr'])) ? $_SESSION['ctr'] : 0);
  if(isset($_GET['incrementBtn']){
    $_SESSION['ctr']++;
  }
  $ctr = $_SESSION['ctr'];
  $imageArray = array();
  $result = $db->query("Select * from image"); //Retrieval Query
  for($x=0; $rows = mysqli_fetch_array($result); $x++){
    $imageArray[$x] = $rows['images']; //The Attribute name of your image, here i simply assume that it is 'image'
  }
?>
<div class="boxa">A1
    <form method="get" action="index.php">
        <input type="submit" name="incrementBtn" value="Display Random Image">
    </form>

    <img src="<?php echo $imageArray[$ctr]; ?>" name="canvas" />
</div>

Hope this helps. Please correct me if something went wrong with this code, since I haven't tried this code because im using my mobile to answer this question. Thanks! :D

Answer 2

On the client side, there's no reason to make an AJAX call to figure out what image to show. Your <img> tag can reference your PHP script directly:

<img src="getRandomImage.php" />

Normally, you're using PHP to return HTML, but there's no reason it can't return binary data as well. Here, we're just letting the browser do the work of making the request. Now, it's up to your server-side script to output the image.

In getRandomImage.php, first you'll need to query for a random image. Best to let the database engine do this, as there's no sense in shuffling excess data between your application and your database server. Your query will look something like this:

SELECT blobData FROM images ORDER BY RAND() LIMIT 1;

(blobData in this case is the name of the column containing the binary image data.)

Use your usual methods for making the query and getting the data. Now, to output it to something the browser can use, first we have to set the appropriate headers. The first sets the response content type to be JPEG. (Change it to whatever is appropriate for you image type, if you're not outputting JPEG.

header('Content-Type: image/jpeg');

Next, we need to prevent caching. This is important, as we're changing the response data for every request to this script:

header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');

Now, just output your image data.

echo $row['blobData'];

If all goes well, you should see the image in your image tag.

Improvements

Normally when you make a GET request, all subsequent GET requests to the same URL with the same request data should return the same response. While this isn't a technical requirement, it's a best practice that enables caches and what not to work correctly.

It is possible for you to still have cacheable images, while making the selection random. To do this, all you have to do is redirect to the image. For example, getRandomImage.php might do something like this:

SELECT id FROM images ORDER BY RAND() LIMIT 1;

Then the response might just be a redirect:

header('Location: image.php?id=' . $row['id']);

Then in image.php, you'll load the image by ID (not randomly) and output it, just as we did in the first example. Ideally, your images would just be static files and be accessible without this subsequent database lookup, and that random selection script could redirect to a static file directly. By default, PHP will do a 302 status code causing a non-permanent redirect which won't be cached in well-behaved clients.

Answer 3

You can use jQuery for a simple Ajax request:

<div class="boxa">A1
  <input id="rndimgbtn" type=button value="Display Random Image">
  <img id="rndimg" src="config.php" name="canvas" />
</div>

$("#rndimgn").click(function(){
  $.ajax({
    url: "./path/to/getmyrandomimage.php", 
    success: function(result){
      var data = $.parseJSON(result);
      $("#rndimg").attr("src", "data:"+data.mime+";base64,"+data.image});
    }
  });
});

And for the PHP:

#getmyrandomimage.php
$db = mysqli_connect("localhost","user","pass","autoselectdb");
$sql = "SELECT image, mime FROM table ORDER BY RANDOM() LIMIT 1";
$sth = $db->query($sql);
$result=mysqli_fetch_array($sth);

die(json_encode((object)[
  "image" => chunk_split(base64_encode($result['image'])),
  "mime" => $result['mime']
]));

Remember to store your images as normal blobs, not encoding or anything. You also need to store the image mime type, otherwise js don't know what image format its trying to render.