Cannot Render images in React while using Server Side Rendering after creating Build ,Cannot GET /[object%20Object]

157 Views Asked by At

I used create-react-app to create a React project. I was experimenting with server-side rendering on express servers. I found a code snippet that showed me how to do it.

ReactDOM.hydrate(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

This is my server side code. index.js

require("ignore-styles");

require("@babel/register")({
    ignore: [/(node_modules)/],
    presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

server.js

import path from "path";
import fs from "fs";

import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";

import App from "../src/App";

const PORT = 8080;
const app = express();

const router = express.Router();

const serverRenderer = (req, res, next) => {
    fs.readFile(path.resolve("./build/index.html"), "utf8", (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send("An error occurred");
        }
        return res.send(
            data.replace(
                '<div id="root"></div>',
                `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
            )
        );
    });
};
router.use("^/$", serverRenderer);

router.use(
    express.static(path.resolve(__dirname, "..", "build"), { maxAge: "30d" })
);

// tell the app to use the above rules
app.use(router);

// app.use(express.static('./build'))
app.listen(PORT, () => {
    console.log(`SSR running on port ${PORT}`);
});

It works fine when I try to get text or other data; however, when I try to render images from the server side, they do not appear. I tried every other solution I could think of, but nothing seemed to work.

images are not rendering and also not showing in View Page Source enter image description here

we also tried <img src={require("./logo.svg")} className="App-logo" alt="logo" />

I tried all the solutions from stackoverflow as well as other sources, but its not working.

I was expecting images to be rendered properly on page.

0

There are 0 best solutions below