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.

[huangdawei]

May I ask why this is not a circular reference? Since the requireServerImage/Css requires webpack-stats.json and the compilation of webpack-stats.json based on the files include requireServerImage/Css.

React-hot-loader refreshes constantly in my repo if I require requireServerImage in the Components.

[erikras]

@huangdawei It sort of is, but the circle is broken with the file system (it loads webpack-stats.json at runtime, but some version of the file must also exist at compile time. This is the source of #60, which makes you have to build twice initially.

[catamphetamine]

I am also having circular builds in my project (but not having circular builds in the example).
For me, this example is broken. If I put some nonsense into src/client.js it doesn't output any errors:

var testing = require('testing.json')

But if I do the same in my project's entry point it immediately says that testing.json is not found.

[catamphetamine]

My solition to this issue:
https://github.com/halt-hammerzeit/cinema/blob/master/code/server/webpack.js

And it eliminates the initial build issue:
#60

load is a function from the global variable on the server (initialized at startup)
https://github.com/halt-hammerzeit/cinema/blob/master/code/server/libraries/utility.js

Still webpack outputs the green stats chart two times in a row - currently don't know why is the second time.

[catamphetamine]

Or one could write require('image') without differentiating between the client and the server and instrument all server require calls like coffeescript does through require("coffeescript/register").
I guess that would be the right solution.

[catamphetamine]

http://bahmutov.calepin.co/hooking-into-node-loader-for-fun-and-profit.html

[catamphetamine]

Ok, I made these require() hooks work and now I just do that:

import picture from './cat.jpg'

and it works both on the client and on the server.

I refactored the relevant code into a separate npm module in case someone needs that:
https://github.com/halt-hammerzeit/webpack-isomorphic-tools

[erikras]

That looks awesome!! Can I get a PR to implement it here?

[catamphetamine]

@erikras yeah, I think, I might do that. maybe in a week or two. cheers

[erikras]

It would certainly warrant a place on the list of libraries making this project awesome in the README.

[catamphetamine]

@erikras oh, so tempting) okay, I'm on it

[catamphetamine]

@erikras So, I managed to integrate the two things together.
Check it out:
#108

I checked it on my machine and it seems to be working.

By the way, http://127.0.0.1:3000/survey doesn't work on my machine, looks like there is an unrelated bug

[erikras]

The survey thing was a package.json problem. A pull should fix.

[catamphetamine]

One little clarifying comment:

We could have wrote it like this (and left it like this)

import picture from './cat.jpg'

And it worked fine but if you changed the required file somehow it wouldn't update (the hash would be recalculated for the required file by webpack because it watches all the assets and rereuns the build process, and stats.json would be updated and re-loaded inside the express rendering middleware because of the if (__DEVELOPMENT__) block).
That's why I changed all asset imports to require()s and moved them inside render() blocks - this way I can flush require() caches in the if (__DEVELOPMENT__) block too, and such assets will be refreshed the next time the developer refreshes the page. (one can try this out say by editing an image file and inserting a random character somewhere in the middle therefore partially corrupting it. and then refreshing the webpage in development mode - the image on the page will also be corrupted because it will be re-require()d)

[catamphetamine]

A follow-up, for everyone's information
https://github.com/halt-hammerzeit/webpack-isomorphic-tools#require-vs-import

[brendanmh]

How do you get this to work using universal-webpack?

[catamphetamine]

@brendanmh by studying universal-webpack readme and the example project linked in the readme.

[brendanmh]

@halt-hammerzeit can you give me a hint as to what part of the readme is relevant? I have been following the readme and have many other things working, but not being able to import images and css from my components.

(Sidenote: I am also looking for a work-around for undefined window)

[catamphetamine]

@brendanmh the most relevant parts of the readme are the first ones.

[brendanmh]

The advertisement or motivation section?

[catamphetamine]

Oh, better look somewhere in the middle then.

[brendanmh]

Thanks for getting back to me so quickly. I trust that this exchange will be useful for other devs struggling with this problem.

[catamphetamine]

By the way, when you're finished setting up the whole thing you can write some sort of a detailed blog post explaining the process so that it "will be useful for other devs struggling with this problem".