Изображения и css не работают с рулями

#node.js #express #handlebars.js #express-handlebars

Вопрос:

Я работаю над своим портфолио и использую руль. У меня есть моя главная index.js в моей корневой папке. Насколько я могу судить, это работает. Моя домашняя(индексная) страница загружается локально в моем браузере, но css и изображения для нее не загружаются. У меня также есть папка «Представления», где находятся мои файлы layout.hbs и index.hbs. Затем у меня также есть папки с изображениями/css, в которых я хочу, чтобы мой index.hbs нашел мои изображения/css (которые я передаю в качестве параметров в моем res.render в моем index.js). Однако, когда я загружаю свою домашнюю страницу, я получаю ошибки:

  1. «[Ошибка] Не удалось загрузить ресурс: сервер ответил со статусом 404 (Не найден) (style.css, строка 0)»
    amp;amp;
  2. «[Ошибка] Не удалось загрузить ресурс: сервер ответил со статусом 404 (Не найден) (resize_profile_pic.jpg, строка 0)»

Вот мой index.js:

 // === VARIABLES === //
var express = require('express');
var app = express();
var handlebars = require("express-handlebars");
var path = require("path");
var router = express.Router();  //creates a router object, do I even need this???

 //===== view ENGINE SET UP =====//
app.set('view engine', 'handlebars');
app.engine(
    "hbs",
    handlebars({
      layoutsDir: path.join(__dirname, "views/layouts"),
      partialsDir: path.join(__dirname, "views/partials"), 
      extname: ".hbs", 
      defaultLayout: "layout" 
    })
);
app.set("views", path.join(__dirname, "views")); 
app.set("view engine", "hbs");
//NOT sure what this does??? Or if I need it???
app.use("/public", express.static(path.join(__dirname, "public")));

//saw this on a previous post but doesn't seem to work???
app.use(express.static('images'));
// Route to display static src images  - also saw this on a previous post???
app.get("/static", (req, res) => {
    res.render("static");
});


//===== .GET PAGES =====//
router.get('/', (req, res, next) => {       //also tried app.get, do I need router???
    res.render('index', {title: 'Home Page', css:['style.css']});
});
app.use('/', router);

app.listen(3000);
 

Вот как мое изображение закодировано в моем индексе.hbs:

 <img src="/images/resize_profile_pic.jpg" alt="">
 

*Я тоже пытался «images/resize_profile_pic.jpg» и нада.

Комментарии:

1. Взгляните на документацию Express по обслуживанию статических активов: expressjs.com/en/starter/static-files.html Это указывает на то, что при указании префикса виртуального пути, т. Е. первого «/общедоступного» app.use("/public", express.static(path.join(__dirname, "public"))); , путь для URI каждого ресурса должен начинаться с этого префикса, как в <img src="/public/images/resize_profile_pic.jpg" alt="">

2. @76484 Привет, спасибо за быстрый ответ! Так что я кое-что читал об этом, прежде чем на самом деле отправил свой вопрос. Я попытался прокомментировать app.use("/public", express.static(path.join(__dirname, "public"))); и использовать <img src> то, что я опубликовал (без /общедоступных/изображений), и изображения hte все еще не загружались. Я также устал оставлять app.use("/public", express.static(path.join(__dirname, "public"))); там, а затем добавлять в "/public" свой <img src> в моем hbs и все еще не работал….

3. Есть ли у вас images/ папка внутри вашей public/ папки, и там ли находится файл изображения?

4. Поэтому мой общий проект хранится в папке под названием MyPorject, сохраненной на моем рабочем столе. Затем в папке MyProject у меня есть все мои вложенные папки, в которые входят изображения. Я получил публичную информацию из предыдущего поста на StackOverflow, поэтому изначально у меня ее не было в коде. Но, несмотря на это, я не создавал общую папку. Я не был уверен, было ли это по умолчанию или что-то в этом роде.

5. Отлично, это сработало, чтобы загрузить мой css и изображения!! Большое спасибо.