Image import is not resolved yet

[xJkit]

trafficstars

Hi Andrie, I just read your post on medium recently about the SSR and Create-React-App without ejecting. It's awesome!

However, the following line of code confuses me:

<img src="./logo.svg" className="App-logo" alt="logo"/>

I think for the client-side-rendered react app, the image assets are imported and resolved by webpack loader:

import logo from './logo.svg';
// ...somewhere in the render method
<img src={logo} className="App-logo" alt="logo"/>

Accordingly, the original way does not fit your medium post. How would you resolve that kind of problem without adding extra webpack config on server-side or ejecting create-react-app?

Thanks a lot.

[xxmuaddib]

Not sure if possible without extra config on server side:

But this can help if anyone is interested:

const md5File = require('md5-file');
const path = require('path');
const ignoreStyles = require('ignore-styles');
const extensions = ['.css', '.gif', '.jpeg', '.jpg', '.png', '.svg'];
const register = ignoreStyles.default;

register(ignoreStyles.DEFAULT_EXTENSIONS, (mod, filename) => {
    if (!extensions.find(f => filename.endsWith(f))) {
      return ignoreStyles.noOp();
    } else {
      const hash = md5File.sync(filename).slice(0, 8);
      const bn = path.basename(filename).replace(/(\.\w{3})$/, `.${hash}$1`);
      mod.exports = `/static/media/${bn}`;
    }
});

And add this to .env (because smaller images are not becoming static media, but base64):

IMAGE_INLINE_SIZE_LIMIT=0

react-scripts must be up to date. This configs for 3.1.1. IMAGE_INLINE_SIZE_LIMIT was introduced in later versions of react-scripts