Question

我正在建立一个画廊但是当我按下其中一个需要将图像放入更大的图像的框时，它会将错误的图像放入其中。

它现在做了什么：

这就是现在的代码：

                <?php
                $hostname='localhost';
                $username='dddoecje_rik_cam';
                $password='*******';

                try {
                    $dbh = new PDO("mysql:host=$hostname;dbname=dddoecje_campu",$username,$password);

                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
                    $i = 0;
                    $len = count($array);
                    $sql = "SELECT * FROM gallery";
                    foreach ($dbh->query($sql) as $row)
                    {
                        echo '
                        <div class="col-md-2">
                           <a>
                              <div onClick="change()" class="enlarge">
                                 <i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i>
                              </div>
                              <img src="data:image/gif;base64,'.base64_encode( $row['image'] ).'"></img>
                           </a>
                           <script>
                              function change() {
                                  var image = document.getElementById("pic-big");
                                  image.src = "data:image/gif;base64,'.base64_encode( $row['image'] ).'";
                              }
                           </script>
                        </div>
    ';
                    }


                    $dbh = null;
                }
                catch(PDOException $e)
                {
                    echo $e->getMessage();
                }
                ?>
</div>
        </div>
        <div class="picture">
            <img id="pic-big" src="assets/img/villa1.png" alt="Villa Big">
        </div>

有人知道导致此问题的原因吗？

Answer 1

 <script>
 function change(src) {
 var image = document.getElementById("pic-big");
 image.src = "data:image/gif;base64,'"+src+"'";
               }
  </script> 
  <?php
  $hostname='localhost';
  $username='dddoecje_rik_cam';
  $password='*******';
            try {
  $dbh = new PDO("mysql:host=$hostname;dbname=dddoecje_campu",$username,$password);
  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
  $i = 0;
  $len = count($array);
  $sql = "SELECT * FROM gallery";
  foreach ($dbh->query($sql) as $row)
  {
  echo '<div class="col-md-2"><a><div onClick="change(\'.base64_encode( $row['image'] ).\')" class="enlarge"><i class="fa fa-arrow-down fa-3x" aria-hidden="true"></i></div><img src="data:image/gif;base64,'.base64_encode( $row['image'] ).'"></img></a></div>';
                }
                $dbh = null;
            }
            catch(PDOException $e)
            {
                echo $e->getMessage();
            }
            ?>
    </div>
    </div>
    <div class="picture">
        <img id="pic-big" src="assets/img/villa1.png" alt="Villa Big">
    </div>

Answer 2

你的代码有错：
1.不要使用</img> img标签不需要。
2.定义循环外的函数。
你应该在image中调用函数而不是它div 4.还应该为你的功能添加一个参数小图片：

$image_src = "data:image/gif;base64,'.base64_encode( $row['image'] ).'";
<img onClick="change(.$image_src.)" src=".$image_src.">

你的JavaScript函数应该是这样的：

function change(img_src)
{
var image = document.getElementById("pic-big");
image.src = img_src;
}

PHP foreach和JS改变源码改变了错误的图片

2 个答案: