如何将图像从数据库传递到 javascript？

Question

我是 javascript 的新手，我正在尝试将图像从数据库传递到 javascript，但我做不到。

问题代码是：

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

这是我的代码

<!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>

Answer 1

您需要在 javascript 和 push 图像路径中创建一个 array。

之前<?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>

循环内部..

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

循环后...

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

Answer 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>

如何将图像从数据库传递到 javascript？

How to pass Image from database in to javascript?

javascript

php

jquery

codeigniter-3