【问题标题】:Can't find my image files while deploying my node js web app on Heroku在 Heroku 上部署我的节点 js Web 应用程序时找不到我的图像文件
【发布时间】:2021-04-25 16:04:25
【问题描述】:

我已经在 Heroku 上部署了我的网络应用程序,但是 Heroku 的服务器在静态文件夹中找不到我的图像文件。 这是我的 app.js 文件....

const express=require("express");
const body=require("body-parser");
const http=require("http");
var path = require('path');


const app=express();

var temp="";
var des="";
var city_name="";
var src="";
var cn="";
var temp_max="";
var temp_min="";

app.use(express.static(path.join(__dirname, 'public')));
app.use(body.urlencoded({extended:true}));
app.set('views', path.join(__dirname, 'views'));
app.set("view engine","ejs");

app.get("/",(req,res)=>{
    res.sendFile(__dirname+"/index.html");
})

app.post("/",(req,res)=>{
    var city=req.body.city;
    var country=req.body.country;
    var date = new Date();
    var api_key="4aa7299408553a0ec003e1dd56d73cf5";
    var url="http://api.openweathermap.org/data/2.5/weather?units=metric&q="+ city +","+country+"&appid=";
    http.get(url+api_key,(response)=>{
        console.log(response.statusCode);
        response.on("data",(data)=>{
            var s=JSON.parse(data);
            temp=s.main.temp;
            city_name=city;
            temp_max=s.main.temp_max;
            temp_min=s.main.temp_min;
            cn=country;
            console.log(s);
            des=s.weather[0].main;
            src=des+".png";
            console.log(src);
            res.redirect("/weather");
            
        })
    })
})

app.get("/weather",(req,res)=>{
    res.render("weather",{temp: temp,city: city_name,des: des,src: src,country: cn,temp_max: temp_max,temp_min: temp_min});
})


app.listen(process.env.PORT || 3000,()=>{
    console.log("Port 3000");
})

我的文件结构....

|--public
  |--images
  |--css
|--views
   |--weather.ejs
 
|--app.js
|--index.html
|--package.json

我的 weather.ejs 文件--

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weahter</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/weather.css">
</head>
<body>
    <div class="box">
        <p><h2><%= city %>, <%= country %></h2></p>
        <p><img src='images/<%= src %>' alts="Des"></p>
        <p><h4><%= temp %>°C</h4></p>
        <p class="temp"><span><%= temp_min %>°C</span>   <span><%= temp_max %>°C</span></p>
        <p><h3><%= des %></h3></p>
        
    </div>
    
        
        
        
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

它给出了以下错误....

Failed to load resource: the server responded with a status of 404 (Not Found)

它在我的本地服务器上运行良好。 我非常担心这个问题。 请帮帮我。

【问题讨论】:

  • 你是把图片推送到你的 git 仓库还是忽略了图片文件夹
  • 我已将项目文件夹中的所有内容推送到 git repo。

标签: node.js express heroku ejs


【解决方案1】:

试试这个代码

<p><img src='./public/images/<%= src %>' alts="Des"></p>

【讨论】:

    猜你喜欢
    • 2018-03-01
    • 1970-01-01
    • 2018-07-29
    • 2018-07-06
    • 2014-10-21
    • 2017-01-07
    • 2012-10-12
    • 2022-01-24
    • 2020-11-29
    相关资源
    最近更新 更多