2

I want to create a program that can create HTML pages when requested. The text in the HTML page works well, but I can't use any external CSS or add local images from my computer. I checked and the paths to the images are valid and if I copy paste the HTML code in an HTML file, it works. My problem only applies to local images, since it worked when the images were online. Here is my placeholder code (I'll do my real program after I figure out how I can access local files).

const express = require('express');
const app = express();

app.use(express.json());



app.get('/', (req, res) => {
    res.send(` 
        
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href ="ressources/manga.css"/>
    <link rel="icon" href="ressources/logo." type="image/x-icon" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manga Reader</title>
    </head><body><div class="logo">
    <img src ="/ressources/logo.gif">
    </div><h1>Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files</h1</br>
    <a class="n-chap" rel="nofollow" href = "Kondo Wa Korosaretakunai Azarashi-San Chapter 2 - Manganelo_files.html"><i></i> Next Chapter ►►</a><br/></n-chap>
    <div class="chapters">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/1-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/2-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/3-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/4-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/5-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/6-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/7-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/8-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/9-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/10-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/11-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/12-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/13-n.jpg">
    <img src="Kondo Wa Korosaretakunai Azarashi-San Chapter 1 - Manganelo_files/14-n.jpg">
    </div>
    <div class="change-chapter">
    <a class="n-chap" rel="nofollow" href = "Kondo Wa Korosaretakunai Azarashi-San Chapter 2 - Manganelo_files.html"><i></i> Next Chapter ►►</a><br/></n-chap>
    </div>
    </body>
    </html>
        `  
    );
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`listening on port ${port}...`));
Phil
  • 157,677
  • 23
  • 242
  • 245
alexou
  • 37
  • 3
  • 2
    Impossible to say what the problem is... I do see that your stylesheet has an href pointing to `ressources/manga.css`, but you have an image whose src is pointing to `../ressources/logo.gif`, so unless your folder structure has two "ressources" folders in it at different levels, that's a problem. Also, you generally want to URL encode paths that have special characters in them, like spaces. Do your Next chapter links work? – Heretic Monkey Oct 18 '22 at 17:52
  • @HereticMonkey Thanks for catching my typo. The correct path is `ressources/logo.gif`. Both of the files are in `ressources/` (without ../ ). What did you mean with URL encode paths having special characters in them? Also, the next chapter button doesn't work, but its not a problem, since this is only a program to test if my html page works I will add this function later. – alexou Oct 18 '22 at 23:03
  • 1
    You need some static middleware to serve the image and CSS assets – Phil Oct 18 '22 at 23:19
  • @Phil like an image server or something like that? – alexou Oct 18 '22 at 23:29
  • 1
    Sort of... you need to tell Express how to serve requests for your CSS and image files. To do so, you use the `express.static()` middleware which is [well documented](https://expressjs.com/en/starter/static-files.html) – Phil Oct 18 '22 at 23:40

0 Answers0