【发布时间】: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