Tweet
Hallo zusammen, warum wird hier mein Logo nicht angezeigt?:
Ich will, dass mein Logo erscheint während das Captcha lädt. Wenn ich mein Logo als base64 oder als Bild aus dem Internet lade, dann klappt's. Wenn ich es aber lokal lade, dann nicht. Wie kann ich das Problem lösen?
Soweit ich es verstehe, gibt es laut Konsole kein Problem beim Liefern des Bildes:
Wenn's gebraucht wird, hier der komplette Code von captcha.php:
Danke und Grüße
HTML Code:
<img src="logo.png" alt="Forum-Logo" class="splash-logo">
Soweit ich es verstehe, gibt es laut Konsole kein Problem beim Liefern des Bildes:
[200]: GET logo.php
PHP Code:
<?php // 1️⃣ Session starten (einmalig) if (session_status() !== PHP_SESSION_ACTIVE) { session_start(); } // 2️⃣ Grid‑Parameter definieren $cols = 5; $rows = 4; $totalTiles = $cols * $rows; $tilesDir = 'captchas/tiles/'; ?> <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Captcha lädt …</title> <style> /* Reset & Base */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family:sans-serif; } /* Splash-Container */ .splash-container { position: fixed; top:0; left:0; right:0; bottom:0; display: flex; flex-direction: column; justify-content: center; align-items: center; background:white; z-index:9999; } .splash-logo { max-width:120px; margin-bottom:10px; } .splash-title { font-size:1.5rem; margin-bottom:8px; } .splash-text { margin-bottom:12px; } .loader { display:flex; gap:6px; } .loader div { width:12px; height:12px; background:#333; opacity:0; animation: blink 1.2s infinite ease-in-out; } .loader div:nth-child(1){animation-delay:0s;} .loader div:nth-child(2){animation-delay:0.4s;} .loader div:nth-child(3){animation-delay:0.8s;} @keyframes blink {0%,100%{opacity:0;}50%{opacity:1;}} /* Captcha-Styles (kommen später) */ .captcha-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:100%; max-width:100%; } .captcha-grid label { position:relative; width:100%; aspect-ratio:1/1; } .captcha-grid img { width:100%; height:100%; object-fit:cover; } .captcha-grid input[type="checkbox"] { position:absolute; top:5px; left:5px; z-index:1; } .error-msg { color:red; font-weight:bold; margin-bottom:10px; } </style> </head> <body> <!-- 2️⃣ Splash-Screen in reinem HTML --> <div class="splash-container" id="splash"> <img src="logo.png" alt="Forum-Logo" class="splash-logo"> <div class="splash-title">Mein Forum</div> <div class="splash-text">Bitte warten …</div> <div class="loader"> <div></div><div></div><div></div> </div> </div> <?php // 3️⃣ Alles bis hierher an den Browser senden flush(); // 4️⃣ Captcha‑Tiles generieren (kann dauern) if (!isset($_SESSION['captcha_wrong'])) { $images = glob('captchas/originals/*.jpg'); $falseParts = glob('captchas/false_parts/*.jpg'); $original = $images[array_rand($images)]; $img = imagecreatefromjpeg($original); $img_w = imagesx($img); $img_h = imagesy($img); $tile_w = intval($img_w / $cols); $tile_h = intval($img_h / $rows); @mkdir($tilesDir, 0777, true); $allIndexes = range(0, $totalTiles - 1); shuffle($allIndexes); $wrongIndexes = array_slice($allIndexes, 0, 4); $_SESSION['captcha_wrong'] = $wrongIndexes; for ($i = 0; $i < $totalTiles; $i++) { $x = ($i % $cols) * $tile_w; $y = floor($i / $cols) * $tile_h; $tile = imagecreatetruecolor($tile_w, $tile_h); if (in_array($i, $wrongIndexes, true)) { $falseImg = imagecreatefromjpeg($falseParts[array_rand($falseParts)]); imagecopyresampled($tile, $falseImg, 0, 0, 0, 0, $tile_w, $tile_h, imagesx($falseImg), imagesy($falseImg)); imagedestroy($falseImg); } else { imagecopy($tile, $img, 0, 0, $x, $y, $tile_w, $tile_h); } imagejpeg($tile, "$tilesDir/tile_$i.jpg"); imagedestroy($tile); } imagedestroy($img); } // 5️⃣ Splash ausblenden echo '<style>#splash{display:none !important;}</style>'; ?> <!-- 6️⃣ Captcha-Formular --> <?php if (!empty($_SESSION['wrong_solved'])): ?> <div class="error-msg">Falsch gelöst. Versuche es erneut.</div> <?php unset($_SESSION['wrong_solved']); ?> <?php endif; ?> <form method="post" action="verify.php"> <p>Bitte wähle <strong>vier Bildteile</strong> aus, die <strong>nicht zum Bild passen</strong>:</p> <div class="captcha-grid"> <?php for ($i = 0; $i < $totalTiles; $i++): ?> <label> <img src="captchas/tiles/tile_<?= $i ?>.jpg" alt="Tile <?= $i ?>"> <input type="checkbox" name="selected[]" value="<?= $i ?>"> </label> <?php endfor; ?> </div> <button type="submit" style="margin-top:10px;">Absenden</button> </form> </body> </html>
Danke und Grüße
Comment