如何将Image从数据库传递到javascript

How to pass Image from database in to javascript?

本文关键字：javascript 数据库 Image      更新时间：2023-09-26

我是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>

<!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和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>
相关文章：