CODEWITHSUNDEEP
javascripthtmlnode.jsimagepug
aligromta
aligromta

Reputation: 1

Images Not Loading In Express Js With Using Pug

I have double-checked the Path and checked again and again but not loading images on the browser. I am using the Pug engine template to serve the page all things seem okay except images are not loading. Here are my files structure in VSC and the code itself.

enter image description here

What i'm getting output on localhost visiting on chrome browser

enter image description here

Here is my app.js code

const express = require("express");
const path = require("path");
// const fs = require("fs");
const app = express();
const port = 80;


const express = require("express");
const path = require("path");

const app = express();
const port = 80;


// EXPRESS SPECIFIC STUFF
app.use('/static', express.static('staitc')) // For serving static files
app.use(express.urlencoded())

// PUG SPECIFIC STUFF
app.set('view engine', 'pug') // Set the template engine as pug
app.set('views', path.join(__dirname, 'views')) // Set the views directory

// ENDPOINTS
app.get('/', (req, res)=>{
    // const con = "This is the best content on the internet so far so use it wisely"
    // const params = {'title': 'PUBG is the best game', "constent": con}
    const params = { }
    res.status(200).render('home.pug', params);
})
app.get('/contact', (req, res)=>{
    // const con = "This is the best content on the internet so far so use it wisely"
    // const params = {'title': 'PUBG is the best game', "constent": con}
    const params = { }
    res.status(200).render('contact.pug', params);
})

// START THE SERVER
app.listen(port, ()=>{
    console.log(`The application started successfully on port ${port}`);
});

Upvotes: 0

Views: 611

Answers (1)

Zem
Zem

Reputation: 474

I ignore declared 2-times express, path, app, port in your app.js.

Introduce my way.

app.js

  // add under const values
  app.use(express.static(path.join(__dirname, 'static')));

home.pug

  img(src="/img/1.png", alt="Dance...")

Upvotes: 1

Related Questions