image not working after build with cra and server side rendering about loadable-components HOT 6 CLOSED

I don't understand the link between loadable-components and your screenshot, can you please give more context?

from loadable-components.

suppose you have project with cra, and you import image like the following

// App component 
import logo from './logo.svg';
....
<img src={logo} alt="logo" />

I think the problem with url loader, when component is rendering in server side, it doesn't resolve the path, and return empty object.
src="[object Object]"

from loadable-components.

Yeah probably, this is not relative to loadable-components. Your problem is a current server-side rendering issue. You are trying to use a Webpack loader server-side.

from loadable-components.

@neoziro
I have a similar problem, the server and the client generate different paths to the picture.

in component file

import gift from "../../icons/[email protected]";
...
render(){
    ...
    return <img alt={"gift"} className={classes.image} src={gift} />
}

After starting the application, I get Warning: Prop src did not match. Server: "/dist/node/application/icons/[email protected]" Client: "/dist/web/application/icons/[email protected]"

webpack.config - taken from your example for SSR with the addition url-loader

            {
                test: /\.(pdf|png|jpg|ttf|eot|svg|woff|woff2)(\?[a-z0-9#=&.]+)?$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "[path][name].[ext]"
                        }
                    }
                ]
            }

could you help me with this?

from loadable-components.

solved a problem in webpack.config change publicPath

//publicPath: `/dist/${target}/`,
publicPath: `/dist/web/`,

from loadable-components.

I think your fix is right, but be careful hash could diverge. Another fix would be to expose node directory client side.

from loadable-components.