Блог

Главная - Вопросы по программированию - Изображения, не отображаемые в hbs/nodejs

Изображения, не отображаемые в hbs/nodejs

#javascript #node.js #express #handlebars.js

Вопрос:

Я пытаюсь создать простое веб-приложение с NodeJS и экспресс-рулями . Но изображения неправильно отображаются на моей html-странице, которую я визуализирую с помощью руля.

Ниже приведена структура моего приложения

Мое приложение-это корневая папка

 -images
-views
  -layouts
    -main.hbs
  -home.hbs
-index.js
-package.json

структура проекта

Мой index.js содержит приведенный ниже код

 const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

//Setting default layout and extension name
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs'
}));

//providing path for images 
app.use(express.static("images"));

//Setting view engine 
app.set('view engine', 'hbs');

//get method for landing page
app.get('/' , (req , res)=>{
  res.render('landing')
})

//get method for home page
app.get('/home',(req,res) =>{
  res.render('home');
})
//Staring server
app.listen(8080,() =>{
   console.log("Server started successfully on port 8080");
});

И home.hbs содержит, как показано ниже

 <!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
</head>
<body>
    <img src="/home/vishu/Desktop/WebTest/ECom/images/apple.jpg"  alt="Apple product set">
</body>
</html>

Что я должен сделать, чтобы устранить вышеуказанную проблему

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

1. Ваше изображение src -это не путь на жестком диске вашего сервера, это URL-адрес (браузер не может видеть HD сервера по очевидным причинам, он должен запросить изображение через HTTP, как и HTML-документ). Вы установили каталог изображений в качестве корневого для статических файлов, так и должно быть <img src="/apple.jpg"> (обратите внимание, что вы, вероятно, хотите создать public вместо этого папку, переместите туда папку изображений и используйте src="/images/apple.jpg" ее, чтобы также можно было ссылаться на статические CSS-и JS-файлы)

Ответ №1:

 let options = {
            dotfiles: "ignore", //allow, deny, ignore
            etag: true,
            extensions: ["htm", "html"],
            index: false, //to disable directory indexing
            maxAge: "7d",
            redirect: false,
            setHeaders: function (res: any, path: any, stat: any) {
                //add this header to all static responses
                res.set("x-timestamp", Date.now());
            }
        };

//process.cwd will fetch from the current working directory and serve images over the server
app.use(express.static(`${process.cwd()}/images`, options));
//it will set the html path that would get served from /views 
app.set('views', express.static(process.cwd()   '/views'));
//it will set the engine
app.set('view engine', 'hbs');

Для URL-адреса изображения укажите путь с помощью размещенных изображений на сервере.

 //BASE URL
`${BASE.URL}/images/Pamlogo.png`
 
 Give it a try, All the best (yes)
Метки: ,