How to load images and other static assets?

Hello,

What is the best way to load images and other assets that will work for both client & server? I could add url-loader and file-loader to webpack config but it will not work on the server.

Are there other options?

Thanks, Ran.

[jaredpalmer]

@justingreenberg babel-register can’t handle the image file types, a workaround is to modify server:

require('babel-register');
if (process.env.NODE_ENV == 'development') {
  require.extensions['.png'] = function () {};
  require.extensions['.jpg'] = function () {};
  require.extensions['.jpeg'] = function () {};
  require.extensions['.woff'] = function () {};
  require.extensions['.woff2'] = function () {};
  require.extensions['.ico'] = function () {};
  require.extensions['.svg'] = function () {};
}
require('./server');

[justingreenberg]

@jaredpalmer hey man, thanks for the awesome kit 😃 i’m sorry to drudge this back up, but may i ask how you are handling SSR images/statics like fonts in your projects? for example, how are you approaching:

// logo-component.js
import LogoImage from './logo.png' // colocated image in component folder

export default ({ linkUrl }) =>
  <a href={linkUrl}>
    <img src={LogoImage} alt="Logo" /> 
  </a>

i’ve been using webpack-isomorphic-tools to handle above cases, which works but the ergonomics and setup feels very brittle and hacky… i’m about to start another project, it would be really great to hear your thoughts and approach—it feels like assets.json could be used for statics as well

thanks again jared, any direction, boilerplate or webpack config you could provide would be greatly appreciated, and i’d be happy to submit a PR if it’s something you want to add to starter

i suspect i’m probably overlooking a super simple solution… thanks again!! 😃