如何将图像的PHP数组发送到Javascript数组并显示它们

Question

Noobie here, Apologies if this question is silly,

I have developed a image match game with set of default images, now i want to access random images from directory for the game.The game logic is done in Javascript. I used php to get random 8 images from the directory and the code is as follows.

random.php:

function getRandomImage() {
    $dire="Annotated Dataset/";
    $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
    shuffle($images);
    $imgarray= array_slice($images,1,8);
    echo json_encode($imgarray);
}
die(json_encode(getRandomImage()));

The above displays file names of 8 images, but I want to display these 8 images in the following Javascript file inside if condition

game.js:

function getgImage(number) {
    var ranarray= "<?php echo json_encode($imgarray)?>";
    if(number=='1'){
        return '<img src="'+ranarray[1]+'">';
    }else if(number == '2'){
        return '<img src="'+ranarray[2]+'">';
    }else if(number == '3'){
        return '<img src="'+ranarray[3]+'">';
    }else if(number == '4'){
        return '<img src="'+ranarray[4]+'">';
    }else if(number == '5'){
        return '<img src="'+ranarray[5]+'">';
    }else if(number == '6'){
        return '<img src="'+ranarray[6]+'">';
    }else if(number == '7'){
        return '<img src="'+ranarray[7]+'">';
    }else if(number == '8'){
        return '<img src="'+ranarray[8]+'">';
    }else{
        return '<img src="resources/logo.png">';
    }
}

the above code i tried to get the images from the array in the php file ( random.php) but I am not able to display the images. Can someone provide a solution on how to proceed. I want the image array[1 to 8] from php to be set inside the If condition such that each image from the array is inside seperate if conditions. Kindly help me with this problem.

Answer 1

EDIT: Look at DubZ comment herunder for a good clue. :-)

By the looks of it, you return only the imagename:

<img src="'+ranarray[2]+'">

That will result in HTML:

<img src="someimage.jpg">

Check your HTML to see what there is listed for the images.

Solution:

Give the FULL URL. eg:

<img src="http://www.yourgame.com/images/someimage.jpg">