如何解决图像未显示在Heroku上
我正在构建一个MERN应用程序,在其中我可以提供从快递到客户的图像。 在开发中,一切正常,但是当我部署到heroku时,它不会显示图像。控制台显示 “无法加载资源:net :: ERR_CONNECTION_REFUSED”。
ImageSlider.js
import React from "react";
import { Carousel } from "antd";
const ImageSlider = (props) => {
return (
<div>
<Carousel autoplay>
{props.images.map((image,index) => {
return (
<div key={index}>
<img
src={`http://localhost:5000/${image.filename}`}
alt={`product_image-${index}`}
style={{ height: "150px",width: "100%" }}
/>
</div>
);
})}
</Carousel>
</div>
);
};
export default ImageSlider;
index.js
const express = require("express");
const app = express();
const path = require("path");
const cors = require("cors");
require("dotenv").config();
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const config = require("./config/key");
const mongoose = require("mongoose");
const connect = mongoose
.connect(config.MONGO_URI || process.env.MONGO_DB_CONNECTION,{
useNewUrlParser: true,useUnifiedTopology: true,useCreateIndex: true,useFindAndModify: false,})
.then(() => console.log("MongoDB Connected..."))
.catch((err) => console.log(err));
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());
app.use("/api/users",require("./routes/users"));
app.use("/api/product",require("./routes/product"));
app.use(express.static("./server/uploads"));
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.use(express.static("./server/uploads"));
app.get("*",(req,res) => {
res.sendFile(path.resolve(__dirname,"../client","build","index.html"));
});
}
const port = process.env.PORT || 5000;
app.listen(port,() => {
console.log(`Server Listening on ${port}`);
});
我从上传文件夹提供静态文件
我的文件夹结构是AppName/
/client
/server/uploads
服务器和mongo在heroku上运行,因为我可以使用凭据登录。
任何帮助都非常重要。
解决方法
您似乎正在尝试从硬编码的URL(http://localhost:5000
)加载图像:
<img
src={`http://localhost:5000/${image.filename}`}
alt={`product_image-${index}`}
style={{ height: "150px",width: "100%" }}
/>
http://localhost:5000
在您的本地计算机上可用,但是一旦将其部署到Heroku,则应将URL替换为新值(http://example.herokuapp.com
)。您也可以尝试使用相对地址,以便在浏览器中自动匹配域:
<img
src={`/${image.filename}`}
alt={`product_image-${index}`}
style={{ height: "150px",width: "100%" }}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。