时间戳

首页 > 解决方案 > 显示存储在数组中的图像（php）

php - 显示存储在数组中的图像（php）

问题描述

我正在为我的网络开发课程做一个练习，但我被卡住了。这是问题所在： - 我有一个多选菜单。当用户选择“音乐”时，我想向他展示三个，每个都包含一个具有背景图像 CSS 属性的图像。图像必须存储在 php 数组中。当用户选择“运动”或“剧院”时，同样需要发生。

问题是当我尝试显示存储在数组中的图像时，我只能看到书面链接（例如“www.pexels.com”），而看不到图像本身。

如果有人可以帮助我，将不胜感激，谢谢！

这是代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Devoir 1 de php</title>
  </head>

  <body>

    <h1>Catégorie:</h1>


      <?php
        include "data.php";

        if (isset($_POST['submit']))
        {

         switch($_POST["activite"])
         {
            case 'musique':
            $image1 = $musique['imageMusique1'];
            $image2 = $musique['imageMusique2'];
            $image3 = $musique['imageMusique1'];
            break;

            case 'théâtre';
            echo "théâtre";
            break;

            case 'sport':
            echo "Sport";
            break;
          }

        }
      ?>

    <form method="post" action="">
      <select name="activite" >
        <option value="musique">Musique</option>
        <option value="théâtre">Théâtre</option>
        <option value="sport">Sport</option>
      </select>
      <input type="submit" value="voir photos" name="submit">
    </form>


    <div style = "background-image: url('<?php echo $image1 ?>')"></div>
    <div style = "background-image: url(<?php echo $image2 ?>)"></div>
    <div style = "background-image: url(<?php echo $image3 ?>)"></div>



  </body>
</html>

这是存储数组的页面的代码（在练习中它们必须分开）。

<?php

$musique = array('imageMusique1' => 'image_musique1.jpg' , 'imageMusique2' => '../images/images_theatre/image_musique2.jpg', 'imageMusique3' => '../images/images_theatre/image_musique3.jpg' );
$theatre = array('imageTheatre1' => '' , 'imageTheatre2' => '', 'imageTheatre3' => '' );
$sport = array('imageSport1' => '' , 'imageSport2' => '', 'imageSport3' => '' );


echo $musique['imageMusique1'];


?>

标签： phparraysimagedrop-down-menubackground-image

解决方案

您的 div 没有空间来显示图像。

例如，设置宽度和高度并尝试：

<div style = "background-image: url('<?php echo $image1 ?>'); width:100px;height:100px"></div>

当然，div 的大小必须符合你的期望。

作为替代方案，您可以<img />改用。

推荐阅读