node.js - images and css don't work

how to read image from folder in node js
node-static
serving static files in express
node serve static files without express
node.js express display image
express.static not working
express node static
serving css files in node js

I'm a newbie in node.js and I just made a chat based on socket.io example. I did a login form on the index of my application but the images and css are not working when I access to my application on localhost:3000. However, when I launch my index.html directly on my browser the css and the images are correctly loaded.

That's the tree of my application : Tree view

And that is what I see when I launch my node js server and I access to localhost:myPort: index.html on localhost

That the head of index.html :

<meta charset="UTF-8">
<title>Khoya Talk</title>
<link rel="shortcut icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">-->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Thank you for your help.

Add / before all public and:

App.js

app.use(express.static(__dirname + '/public'));

index.html

<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">

And make this for all path. And src property in images:

<img src="/assets/images/halftone.png">

Serving Static Resources in Node.js, Learn how to serve static resources like images, css, JavaScript or other static files It is easy to serve static files using built-in middleware in Express.js called You can also create a virtual path in case you don't want to show actual folder� In this simple and easy Node.js HTTP module get a complete tutorial how to serve Static Files HTML, CSS & Images and get your skills higher.

When you load the page in your browser, check the developer tools / debugger to see whats happening.

If it cant find the css (or the images), its because you need to use Express like this (in your js file): At the top add:

 var express = require("express");
 var app     = express();

Then add folders with the content like this:

 app.use(express.static(__dirname + '/public'));

How to Serve Static Files (CSS, JS, Images) in Express JS , Learn to Serve Static Files (CSS, JS, Images) using express.static method along with how to define multiple static directories using express js. This package provides us a Node.js based implementation of the Canvas API that we know and love in the browser. In other words, everything I use to generate images also works in the browser. Except instead of getting a Canvas instance from a <canvas> HTML element, I load the library, get the function createCanvas out of it:

Apparently, you have to use the / with the static directory

app.use(express.static(__dirname + '/public/'));

Then in your CSS: background-image('img/pic.png') where img is the folder you store your images in, and make sure it is in the public folder.

Hope that helps.

Serving static files in Express, To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express. The function signature is: In this way, you can use Express.js to server static resources such as images, CSS, JavaScript or other files. Serve Static Resources using Node-static Module In your node application, you can use node-static module to serve static resources. The node-static module is an HTTP static-file server module with built-in caching.

Generate images from HTML in Node.js - DEV, As developers, we don't have great skills with image manipulation softwares, but we still need it. In my case I had to generate Twitter cards for� We will create images, CSS, JS folder and index.html file within the public folder and serve directly from public folder. Run command to create file and folder inside the public folder: mkdir css && mkdir images && mkdir js && touch index.html. Add the express.static method inside the server.js file.

Asset Management, In order to import a CSS file from within a JavaScript module, you need to install and add To see what webpack did, inspect the page (don't view the page source, as it won't + const myIcon = new Image(); + myIcon.src = Icon; + + element. So I've been trying to serve css in my dynamic website using node.js, but when my server serves css, it just serves it as plain/text and not CSS. I can't tell what I'm doing wrong. We didn't go over anything like this in the video, and I've been watching them over and over, but it seems like this challenge was out of left field with no help at all.

frinyvonnick/node-html-to-image: A Node.js module that , A Node.js module that generates images from HTML. If you want to set output image's resolution you need to set its dimension using CSS like in the following If you don't want to save the image to disk and would rather do something with it� Plain JavaScript (Node.js) example; Need help? Generating images with JavaScript . The API takes your HTML/CSS and runs it inside a real instance of Google Chrome to convert your html into an image. Use JavaScript to send the API your HTML/CSS. You’ll get back the URL to your generated image. For more details on how this works, see Creating an image.

Comments
  • Can you provide the code of HEAD with the imports of CSS and the src of the images in the index.html?
  • Are you using ExpressJS? You should set the static directory for assets or you simply have the wrong path.
  • how is node serving the public directory? also it could probably end up being an absolute path instead of a relative one public/assets -> /public/assets
  • @LucasCosta I edit my post.
  • @Michelem Yes I'm using ExpressJS and I try this in my index.js (the file which contain the nodejs server) : app.use('/public', express.static(__dirname + '/public/assets'));
  • when I do app.use(express.....); it doesn't work. but when I do : app.use('/public', express.static(__dirname + '/public')); it works partially the background image set in my css file like this (background-image: url('../assets/images/navy_blue.png');) works but my favicon don't. For my favicon I did what you say
  • ty, but it works partially, the background which is set in my css doesn't appear : background-image: url('../assets/images/navy_blue.png'); an image in my body appear : <img src="/assets/images/tchat.svg"> and the favicon doesn't appear : <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon"> Thank you for your answer