CODEWITHSUNDEEP
expressherokustatic
Faust
Faust

Reputation: 1

Images not showing up on Heroku

I am building a MERN app where I serve images from express to the client. In development everything loads fine but when i deploy to heroku it won't show the images. the console shows "Failed to load resource: 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}`);
    });

I serve static files from the upload folder My folder structure is AppName/

  /client 
  /server/uploads

The server and mongo are running on heroku because I can log in with my credentials.

Any help is much apreciated.

Upvotes: 0

Views: 820

Answers (1)

zuchmanski
zuchmanski

Reputation: 56

It seems that you are trying to load images from hardcoded URL (http://localhost:5000):

<img
   src={`http://localhost:5000/${image.filename}`}
   alt={`product_image-${index}`}
   style={{ height: "150px", width: "100%" }}
/>

http://localhost:5000 is available on your local machine but once you deploy it to Heroku the URL should be replaced with a new value (http://example.herokuapp.com). You can also try to use relative address so the domain is automatically matched in the browser:

<img
   src={`/${image.filename}`}
   alt={`product_image-${index}`}
   style={{ height: "150px", width: "100%" }}
/>

Upvotes: 1

Related Questions