1

スタイル付きリストに表示しようとしているデータベースにいくつかの画像が保存されています。アイデアは、データベースから画像を呼び出すと、php コードがスタイル付き<div>要素内にリストを生成することです... 残念ながら、これは当てはまりません。リストは生成されていますが、どのスタイルにも従わず、画像が表示されません。

画像はページの幅と高さの境界線を示していますが、中央に欠落しているファイルのアイコンがあります...データベースに行くと、ファイルは明らかにそこにあり、名前が付けられています。URL の末尾にfile_display.php?id=1と入力しても、画像が表示されます...

画像は jpeg 形式でデータベースに保存されます。表は LONGBLOG データを除きます。

画像を取得してリストに表示するコードは次のとおりです。

    <div class="template_container">
    <h2>Templates</h2>  
    <ul style="margin: 0 50px;">

        <?php   

            // Grab the data 
            $sql = "select * from templates";
            $result = mysql_query($sql) or die ("Could not access DB: " . mysql_error());
            while ($row = mysql_fetch_assoc($result))
            {
                echo "<li>";
                echo "<a class=\"caption" . "href=\"cart.php?id=<?=" . $row['id'] . "&action=add>";

                echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";
                echo "<span>";
                echo "<big>" . $row['name'] . "<br />";
                echo $row['description'];
                echo "</span>";
                echo "</li>";

            }

        ?>
    </ul>
</div>

リストのスタイルを設定するCSSは次のとおりです。

.template_container {
    width: 100%;
    height: auto;
    border-top: 1px solid #e8e8e8;
    margin: 75px auto 25px auto;
    padding-top: 25px;
}

.template_container h2 {
    font-family: 'Podkova', serif;
    font-size: 58px;
    line-height: 66px;
    color: #2d9dc8; font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -2px; 
    text-align: center;
    margin-bottom: 50px;
}

.template_container ul li { 
    list-style-type: none; 
    display: inline; 
    text-align: center;
    zoom:1; 
    *display:inline;
}

.template_container ul { vertical-align: inherit; }
.template_container li { margin-left: 25px;}
.template_container img { 
    width: 180px;
    margin-bottom: 50px; 
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    -khtml-box-shadow: 0px 0px 10px #888;
}

a.caption { 
    position: relative !important;
}
a.caption span { 
    background: #000; 
    background: rgba(0,0,0,0.8); 
    color: white !important; 
    display: none; 
    padding: 5px 10px !important; 
    text-align: center; 
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important; 
}
a.caption:hover {
    text-decoration: none;
}

リスト項目内の<a class="caption">および要素について疑問に思っている方のために、ホバー時にそれらを表示する JavaScript を用意しました。<span>

更新:スタイルの問題を見つけました。失敗してリンクを閉じるのを忘れ<br />、イメージ タグの最後に誤って a を追加して、リストがインラインにならないようにしました。

しかし、私はまだ自分の画像を見ることができません...まだ解決策を探しています...

4

2 に答える 2

2

画像 URL の生成に何か問題があると思います。

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=<?=" . $row['id'] . "\" alt=\"\" /><br />";

「< ? =" が必要なのはなぜですか? なぜだけではないのですか

echo "<img src=\"http://URL-REMOVED.com/file_display.php?id=" . $row['id'] . " alt=\"\" /><br />";
于 2012-08-23T02:27:29.313 に答える
0

ご参照ください：

http://en.wikipedia.org/wiki/Data_URI_scheme#Inclusion_in_HTML_or_CSS_using_PHP

于 2012-08-23T02:26:52.420 に答える