基于ExpressJS的网站：读取图片URL的TXT文件并卡片式展示于HTML

Got it, let's break this down step by step to get those images displayed in clean, stylish cards similar to the reference you mentioned. Here's how to implement this with your ExpressJS, HTML, CSS stack:

First, we need to set up an Express endpoint that reads your image URL TXT file and returns the data as JSON (easy for the frontend to parse). Add this to your Express app file:

const express = require('express');
const fs = require('fs').promises;
const path = require('path');
const app = express();

// Serve static files (your HTML/CSS/JS)
app.use(express.static('public'));

// Route to get image URLs
app.get('/api/images', async (req, res) => {
  try {
    // Path to your TXT file (adjust this to your actual file location)
    const txtPath = path.join(__dirname, 'image-urls.txt');
    const fileContent = await fs.readFile(txtPath, 'utf8');
    
    // Split content by new lines, filter out empty lines
    const imageUrls = fileContent.split('\n').filter(url => url.trim() !== '');
    
    res.json(imageUrls);
  } catch (err) {
    console.error('Error reading TXT file:', err);
    res.status(500).json({ error: 'Failed to load image URLs' });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Make sure your TXT file has one image URL per line (no extra spaces if possible) for this to work smoothly.

Create an HTML file (e.g., public/index.html) with a container to hold the image cards:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Card Gallery</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Image Gallery</h1>
    <div id="image-cards-container" class="card-grid"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Create public/script.js to fetch the image URLs from your Express endpoint and build the card elements dynamically:

document.addEventListener('DOMContentLoaded', async () => {
  const cardContainer = document.getElementById('image-cards-container');

  try {
    const response = await fetch('/api/images');
    if (!response.ok) throw new Error('Failed to fetch images');
    
    const imageUrls = await response.json();

    // Loop through each URL and create a card
    imageUrls.forEach(url => {
      const card = document.createElement('div');
      card.classList.add('image-card');
      
      const img = document.createElement('img');
      img.src = url;
      img.alt = 'Gallery image';
      // Add error handling for broken images
      img.onerror = () => img.src = 'https://via.placeholder.com/300x200?text=Image+Not+Found';
      
      card.appendChild(img);
      cardContainer.appendChild(card);
    });
  } catch (err) {
    console.error('Error:', err);
    cardContainer.innerHTML = '<p>Failed to load image gallery.</p>';
  }
});

Create public/styles.css to replicate that clean, responsive card layout similar to the reference site. This uses CSS Grid for responsive spacing and adds subtle hover effects:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.image-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Ensures images scale without distortion */
}

Quick Notes: #

• Adjust the grid-template-columns value in CSS if you want wider/narrower cards by default.
• The object-fit: cover property ensures images fill the card space without stretching—tweak this to contain if you prefer to see the full image instead.
• Make sure your TXT file path in the Express route matches where you've stored the file relative to your app.js.

内容的提问来源于stack exchange，提问作者Ivan