nodejs 获取服务器文件夹里面图片，并前端进行幻灯展示

在Node.js中，你可以使用fs模块来读取服务器上的图片文件，并使用Express框架来创建一个简单的API，前端可以通过Ajax请求这个API来获取图片并实现幻灯片展示。

以下是一个简单的示例：

安装Express：




npm install express

创建一个简单的服务器，并添加一个API来读取图片：




const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;
 
// 读取图片并返回二进制数据
app.get('/api/images', (req, res) => {
  const directoryPath = path.join(__dirname, 'images'); // 假设'images'是存放图片的文件夹
  fs.readdir(directoryPath, (err, files) => {
    if (err) {
      return res.status(500).send('Unable to scan images!');
    }
    const imageFiles = files.filter(file => file.endsWith('.jpg') || file.endsWith('.png'));
    const imageUrls = imageFiles.map(file => `http://localhost:3000/images/${file}`);
    res.json(imageUrls);
  });
});
 
// 静态文件服务
app.use('/images', express.static('images'));
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

前端使用JavaScript和Ajax请求这个API，并展示幻灯片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider</title>
<style>
  #slider {
    width: 640px;
    height: 480px;
    overflow: hidden;
  }
  img {
    width: 640px;
    height: 480px;
  }
</style>
</head>
<body>
<div id="slider"></div>
 
<script>
  function fetchImages() {
    fetch('/api/images')
      .then(response => response.json())
      .then(imageUrls => {
        const slider = document.getElementById('slider');
        imageUrls.forEach(url => {
          const img = document.createElement('img');
          img.src = url;
          slider.appendChild(img);
        });
      })
      .catch(error => console.error('Unable to fetch images.', error));
  }
 
  // 调用函数获取图片并创建幻灯片
  fetchImages();
</script>
</body>
</html>

在这个例子中，前端通过Ajax请求/api/images接口来获取图片列表，然后动态创建<img>元素并添加到幻灯片中。确保你的图片存放在服务器的images文件夹内，并且服务器运行这段Node.js代码。

nodejs 获取服务器文件夹里面图片，并前端进行幻灯展示

评论已关闭

推荐阅读