importing images

[tonis2]

Has anyone got importing images with webpack working? For me it seems to break server render.

[erikras]

I've got it working, but only via css background-image: url('./dog.jpg') sort of stuff. I will investigate doing so in javascript.

[huangdawei]

I can't get it to work with server side rendering too, any progress?

[erikras]

Right, that was the problem. I'd forgotten Because you can't just wrap it in an if (__CLIENT__) {} like you can with the stylesheets. I wasn't able to figure a way around that when I was looking. 😞

[huangdawei]

Thanks, it's a temporary solution, but not a good idea since the Server-side code is discarded and the images start to load only if the of JS files were loaded.

[huangdawei]

Maybe it's a problem of Babel.

[erikras]

Insight from @leonli:

---

https://github.com/iam4x/isomorphic-flux-boilerplate/blob/master/app/utils/image-resolver.js

import imageResolver from 'utils/image-resolver'

let image;
// On browser just require() the image as usual
if (process.env.BROWSER) {
  image = require('images/logo.png');
}
else {
  image = imageResolver('images/logo.png');
}

...
render () {
  return (
    <img src={image} />
  );
}
...

[leonli]

Just a thought, and it's also related to #48
Instead of reading images and scss files from the memory of webpack stats, I would prefer the elegant way is to write the better loaders for sass-loader and the image-file-loader, turn on the feature of rendering both on browser and the nodejs, am I right?

[erikras]

@leonli Possibly.

[leonli]

PR #66 sent. Implemented the solution I talked above. 😄

[NogsMPLS]

Still get issues with home page logo image rendering. The server markup isn't matching client markup, specifically because of the logo image.

image.assets[0] is localhost:3001/dist/undefined

[erikras]

Good catch. I'm seeing that too. Will investigate.