sql >> Database teknologi >  >> RDS >> Mysql

Hvordan viser jeg billeder fra MySQL-databasen i en JavaScript-billedskyder?

Her er en meget grundlæggende Slideshow-fra-PHP-applikation. Det kan nemt ændres eller bygges på. Billednavne (file_name ) trækkes fra databasen og derefter skubbes ind i en JavaScript-array af billed-src-værdier. Sørg for, at du også angiver billedbiblioteket (hvor billederne faktisk er gemt), så det passer til dit eget. En simpel billedindlæser er inkluderet, da diasshowet afspilles automatisk.

<?php
$conn = new mysqli('localhost', 'root', 'password', 'images')
  or trigger_error('Connection failed.', E_USER_NOTICE);
}
$conn->set_charset('utf8');
$paths = [];
$dir = "./pics"; // images directory (change to suit)

$stmt = $conn->prepare("SELECT `file_name` FROM `images`");
$stmt->execute();
$stmt->bind_result($file);
while ($stmt->fetch()){
  $paths[] = $dir . "/" . $file;
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slideshow from PHP</title>
</head>
<body>
<div>
  <!-- may set first image src in markup so initially visible -->
  <img id="slide" src="./pics/image1.jpg" alt="slideshow">
</div>
<script>
var time = 5000,    // time between images
    i = 0,              // index for changing images
    images = [],    // array of img src from PHP
    preloads = [],      // array of preloaded images
    slide = document.getElementById("slide");

images = <?php echo json_encode($paths); ?>; // from PHP to Js array
var len = images.length;

function changeImg(){
  slide.src = preloads[i].src;
  if (++i > len-1){
    i = 0;
  }
  setTimeout(changeImg, time);
}
function preload(){
  for (var c=0; c<len; c++){
    preloads[c] = new Image;
    preloads[c].src = images[c];
  }
}
window.addEventListener("load", function(){
  preload();
  setTimeout(changeImg, time);
});
</script>
</body>
</html>



  1. MySQL og PHP Vælg mulighed med information fra databasen

  2. Python3 + MySql:Fejl ved indlæsning af MySQLdb-modul:Intet modul med navnet 'MySQLdb'

  3. Oracle SEQUENCE - 'øge med' og 'cache'

  4. 'ER_PARSE_ERROR' på node mysql ved indsættelse af flere værdier