React-sketchapp: Failing to require a local image

[blechatellier]

Tried to include a local image to the basic-setup example and it's failing to load it. Is this an issue with skpm or just unsupported at this stage?

Thanks!

Executing post-build scripts
error Error while building ./my-command.js
./src/pic.jpg
Module parse failed: /react-sketchapp/examples/basic-setup/src/pic.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/my-command.js 55:70-90
- reactTreeToFlexTree: 0.003
- computeLayout: 0.067
new renderer: 0.083

How to reproduce:
<Image source={require('./pic.jpg')} style={{ width: 200, height: 200 }} />

Sketch version:
43.2

[jongold]

Currently, we load images from URLs - this should be relatively easy to implement though.

Would love a contribution if anyone feels up to it - I won't have time to tackle it myself at least until next week

Some notes:

• I'm not a webpack expert but I think you should be able to use some combination of loaders
• skpm just wraps webpack
• you can give skpm a custom webpack config by adding a webpack.config.js file in the root of your project (wherever your package.json is)
• some changes will also have to be made in src/renderers/ImageRenderer.js (remember to npm link!)
• once it's all working we can discuss moving the updated webpack config into skpm itself

[blechatellier]

@jongold thanks, I can give it a go!

[blechatellier]

@jongold working now by tweaking skpm only. I couldn't really leverage the custom webpack.config.js so I've opened a PR at https://github.com/sketch-pm/skpm/pull/37

[jongold]

!!!!!!!!!!! @pastawoua you're awesome. let's take discussion over to https://github.com/sketch-pm/skpm/pull/37 :)

[blechatellier]

@jongold 👍

After going through the rabbit hole of importing images, I realised that the resolution (2x, 3x) is going to be an issue, I guess it could be parsed and always imported at the highest available resolution. The next question is are pngs/jpgs really appropriate in a design system for things like icons, wouldn't it be better to import svgs as Sketch can't tint images. How do you manage icons on your side?

[mathieudutour]

you should now be able to import local images with skpm

[LincMitch]

This seems to be an issue in v1.0.0.