How to pass Image from database in to javascript?

Question

I am new to javascript and I'm trying to pass image from database into javascript, but I can not.

The problem code is :

'<img src="<?php echo base_url().'./images/burger/'.$val->image ?>">';

and this is my code

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="box">
    <img id="image" />
</div>
<?php
$query = $this->db->get('product');
foreach($query->result() as $val):
?>

<script>

    var images =
    '<img src="<?php echo base_url().'./images/burger/'.$val->image ?>">';

function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = images[x];
}

randImg();
</script>
<?php endforeach; ?>
</body>
</html>

If I am not mistaken, you are using codeigniter, need to know what is error saying... — Marmik Bhatt
– Marmik Bhatt, Commented Nov 6, 2015 at 8:43
for codeigniter it ok. but pass image into javascript I can not — user307709
– user307709, Commented Nov 6, 2015 at 8:44
@MarmikBhatt you are not mistaken. The 'codeigniter' tag gives it away.. — MaggsWeb
– MaggsWeb, Commented Nov 6, 2015 at 8:44
Yeah I saw you were try to do javascript, that part is okay I think. — Rasclatt
– Rasclatt, Commented Nov 6, 2015 at 8:47

Professor Abronsius · Accepted Answer · 2015-11-06 10:48:37Z

2

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript random image</title>
        <?php
            /* Query the db */
            $query = $this->db->get('product');
            /* use php to generate the javascript array of images from db query */
            echo "
            <script type='text/javascript'>
                var images=[];
                var baseurl='".base_url()."';
                var path='./images/burger/';";

            foreach( $query->result() as $val ){
                /* Add image to javascript array */
                echo "images.push('{$val->image}');\n";
            }

            echo "
            </script>";
        ?>  
        <script type='text/javascript'>

            function rnd_index(a,b) {
                return Math.round( a + ( Math.random() * ( b - a ) ) );
            }
            function randImg() {
                var x = rnd_index( 0, images.length-1 );
                document.getElementById('image').src = baseurl + path + images[ x ];
            }

            function orig__randImg() {
                var size = images.length;/* This might be too large sometimes for the array */
                var x = Math.floor( size * Math.random() );
                document.getElementById('image').src = path + images[ x ];
            }
            /* Load a random image when the page has loaded */
            window.onload=randImg;
        </script>
    </head>
    <body>
        <div id="box">
            <img id="image" />
        </div>
    </body>
</html>

edited Nov 6, 2015 at 10:48

answered Nov 6, 2015 at 8:52

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Professor Abronsius Over a year ago

My only concern there would be that the random number that selects from the array MIGHT be, on occasion, too high and cause an error. Take a look at the edited / amended version.

user307709 Over a year ago

in the var path='./images/burger/';";

user307709 Over a year ago

beacase when I link to other page can not see the picture

Ashwini Agarwal · Accepted Answer · 2015-11-06 08:48:17Z

2

You need to create an array in javascript and push the image path.

Before <?php foreach(...

<script>
    var images = [];
    function randImg(images) {
        var size = images.length
        var x = Math.floor(size * Math.random())
        document.getElementById('image').src = images[x];
    }
</script>

Inside the loop..

<script>
    images.push("<?php echo base_url().'./images/burger/'.$val->image ?>");
</script>

After loop...

<script>
    randImg(images);
</script>

answered Nov 6, 2015 at 8:48

Ashwini Agarwal

4,8582 gold badges44 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to pass Image from database in to javascript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related