[Image + Packager] Recurring require("image!...") issues

[JonathanMatthey]

following up on #282 - it still seems to happen to a lot of us. works fine for a while and then out of nowhere

tried all the suggested solutions

• updating global react-native 0.3.1
• updating local react-native 0.3.1
• node_modules .. packager.sh with --assetsRoot = defined
• naming imagesets exactly the same as the image filename

a temporary fix is to host your localhost and serve the image through {{ uri: "localhost... myimage.png"}} - that works fine :) but not a great solution

[InfamousVague]

Was just reading http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native apparently a recent update reverted the fix 😞

[amasad]

sorry for the bad experience. Does restarting the server helps?

This is certainly a stopgap period until we get to a point where the server manages the assets fully and properly. But first I'll make sure this is more reliable.

[willpiers]

does anyone know which webpack loader(s) need to be used with a react native <Image /> element? I want to be able to write require('image!myImage') and have webpack leave it alone for react native

[InfamousVague]

@amasad Restarting the server doesn't seem to help. I've tried for a few hours to attempt different methods but had no success.

[chirag04]

I spend the past one hour to debug this issue. Images are not working for me either. I have tried all the suggestions here.

I think docs can be made more clear about how to required images once the issue is resolved here.

[notduncansmith]

The following command (as suggested in #481) worked for me (v0.1.0):

node_modules/react-native/packager/packager.sh --root=./ --assetRoots=./iOS/Images.xcassets

A note in the documentation would be great. Also, this should probably be defaulted somewhere (at least in the boilerplate generated from the cli).

EDIT: Also works on v0.3.1 (latest version at time of writing)

[amasad]

@notduncansmith Yup, this issue is fixed in v0.3.1
Is everyone here on this version?

[InfamousVague]

@amasad I'm on the latest commit and it's not working, I figured I'd pull from GitHub vs the NPM release since there are a lot of PR's I'm hoping get merged soon :)

Though it's worth noting I have tried 0.3.1 and it does not work there either for me.

Also in OP:

tried all the suggested solutions

updating global react-native 0.3.1
updating local react-native 0.3.1

[notduncansmith]

Matt, just to clarify: it did not work when you used the terminal command I
posted above?

On Tue, Mar 31, 2015 at 6:10 PM Matt Wisniewski notifications@github.com
wrote:

@amasad https://github.com/amasad I'm on the latest commit and it's not
working, I figured I'd pull from GitHub vs the NPM release since there are
a lot of PR's I'm hoping get merged soon :)

Though it's worth noting I have tried 0.3.1 and it does not work there
either for me.

—
Reply to this email directly or view it on GitHub
#521 (comment)
.

[InfamousVague]

@notduncansmith Not that I remember, I think it gave me a packager error; I'll give it another shot though.

[chirag04]

@amasad I'm on latest version and it's not working for me.

@notduncansmith I tried your command also. It's still not working.

[InfamousVague]

Can confirm it works if you revert to v0.3.1 (I was running the latest commit vs the NPM module) 👍

Steps I took:
(obvious but might help others)
Change version in package.json

"react-native": "0.3.1",

Clean up old version

rm -rf node_modules/

Reinstall

npm install

Add image to images.xcassets.

Add the require code

            <Image
              style={loginStyles.logo}
              source={require('image!tweetbucket')}
              />

Run @notduncansmith's command to override / set assetRoots,

node_modules/react-native/packager/packager.sh --root=./ --assetRoots=./iOS/Images.xcassets

⌘R in xcode

Yay it worked!

I still think this should be considered an issue though since it was apparently working out of the box in previous versions.

Also odd little bug it actually rendered the view twice at one point which was weird but I couldn't reproduce it.

[amasad]

Can confirm it works if you revert to v0.3.1;

Do you mean update to v0.3.1? Since it's the latest version.

It'd be really helpful if you can tell me it this work: Can you follow the standard project creation flow in the getting started guide? Add an image and report back if this works?

http://facebook.github.io/react-native/docs/getting-started.html#content

[InfamousVague]

@amasad sorry should note I was using commit hash instead of npm hosted version

It'd be really helpful if you can tell me it this work: Can you follow the standard project creation flow in the getting started guide? Add an image and report back if this works?

I tried that before (last night 9PM EST) and without running a special command to define the assets location it does not work, I get a message something similar to could not find module require(image!someimagename) if you are sure it is there restart the PM

[chirag04]

@amasad I can confirm it works with 0.3.1 and requiring images like this: require('image!something');

For me it doesn't work because i have an image inside a listView. listView data is stored in the app instead of a network call. I want to host the images also in the app.

Doesn't work when i do require('image!' + this.props.image)