New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Image + Packager] Recurring require("image!...") issues #521
Comments
Was just reading http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native apparently a recent update reverted the fix 😞 |
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. |
does anyone know which webpack loader(s) need to be used with a react native |
@amasad Restarting the server doesn't seem to help. I've tried for a few hours to attempt different methods but had no success. |
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. |
The following command (as suggested in #481) worked for me (v0.1.0):
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) |
@notduncansmith Yup, this issue is fixed in v0.3.1 |
@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:
|
Matt, just to clarify: it did not work when you used the terminal command I On Tue, Mar 31, 2015 at 6:10 PM Matt Wisniewski notifications@github.com
|
@notduncansmith Not that I remember, I think it gave me a packager error; I'll give it another shot though. |
@amasad I'm on latest version and it's not working for me. @notduncansmith I tried your command also. It's still not working. |
Can confirm it works if you revert to v0.3.1 (I was running the latest commit vs the NPM module) 👍 Steps I took:
Clean up old version
Reinstall
Add the require code
Run @notduncansmith's command to override / set assetRoots,
⌘R in xcode 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. |
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 |
@amasad sorry should note I was using commit hash instead of npm hosted version
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 |
@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) |
@chirag04 I don't belive you should not use concatenation as outlined here:
http://facebook.github.io/react-native/docs/image.html#static-assets |
I know thats a bad practice but how do you solve my usecase mentioned above? |
@chirag04 That I'm not sure about, I read on SO that version 0.3.0 might work. Have you given that version a try? |
You should use {uri: this.props.image} for non static images |
@chirag04 The idea with static images (images that appear in the iOS asset bundle, i.e. Example: var images = {
first: require('image!first'),
second: require('image!second'),
// ... etc
};
var image = images[this.props.image];
<Image source={image} /> |
@notduncansmith That totally works for me! Thanks 👍 |
OK so closing for now. However, this will get even better soon (better error messages, better workflow etc) |
For me images that are PNG will work but images that are JPG will not. It the jpgs don't get processed, or at least they don't show up in the debugger. One workaround for now is to just rename the jpg's with the png extension. ymmv |
@debreuil can you open this as a separate issue? |
new issue for jpgs is here now: #646 |
How has this been resolved? I am on 0.3.4 and am totally unable to load images using all of the suggestions. The only think I can do currently use local file references. Is there some sort of naming convention that I am missing? I have attempted both |
In v0.4.0, seems running command above not solve the problem? Can someone give me a hint? |
Same here. |
@larsvinter |
Use this source={{ uri: "google", isStatic: true }} instead of require('image!google') |
@arunshan how about some env deets or a link to your source to make things
|
@arunshan disregard. crossed threads |
I was having a problem where my static image specified as If I add |
This definitely works. |
Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed. |
i have a problem here, im trying to set width and height to navgatorIos rightbuttonIcon.. <NavigatorIOS ref="nav" barTintColor='#fff' tintColor='grey' style={[styles.container] } initialRoute={{
|
This is definitely not working for me on 0.8.0 ... I've followed all the steps:
|
I have noticed that RN expects the underlying filename to be the same as the name of the asset in |
@paramaggarwal I've definitely got that right ... it's |
@triage try to rename the png to jpg. not convert, just rename. I know it's a hack but it worked for me. |
If you're using images that are bundled in an asset catalog (xcassets), you'll need to use the exact key name as in your catalog file. If you still have problems with this, please open a new issue. |
Hey @javache I'm using
nothing else seemed to work. |
the setup that got me in to trouble is:
I was really hoping that, under the hood, |
In package.json: In index.ios.js: In Images.xcassets: AppIcon Xcode when built: 2015-11-10 09:29:56.522 [error][tid:main][RCTBatchedBridge.m:436] Error while loading: Unable to resolve module image!logo Update 11/16: Best resource for static images is here: http://facebook.github.io/react-native/docs/images.html#content |
@shaunbjohnson Have you solve the problem? |
@shaunbjohnson I've encountered the same issue. I found out, however, that removing the "require" statement my project is able to compile in Xcode. Then I start my app on the simulator and insert the require line to my image component. Afterwards the image is displayed properly. Any fix for this? edit: Found this fix: http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native |
After migrating to 0.14.2 and using this new approach "require('./img/logo.png')" works fine when I'm running from a local server but once I try to run from the minified bundle the image asset does not render, has anyone else experienced this? |
@ippy04 Thanks, this was helpful! |
|
using React-Native 0.22.0 with ordinary (react-native-cli init) setup, and inline require does not work... |
None of the above has worked for me. 0.42.3 |
How can i save/store device captured image to remote pc folder. Is it possible in react native? |
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
a temporary fix is to host your localhost and serve the image through
{{ uri: "localhost... myimage.png"}}
- that works fine :) but not a great solutionThe text was updated successfully, but these errors were encountered: