React-native: [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

[RetroPronghorn]

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

[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

[RetroPronghorn]

@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?

[RetroPronghorn]

@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 [email protected]
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
https://github.com/facebook/react-native/issues/521#issuecomment-88279349
.

[RetroPronghorn]

@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.

[RetroPronghorn]

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

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

[RetroPronghorn]

@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)

[RetroPronghorn]

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

@chirag04 I don't belive you should not use concatenation as outlined here:

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

http://facebook.github.io/react-native/docs/image.html#static-assets

[chirag04]

I know thats a bad practice but how do you solve my usecase mentioned above?

[RetroPronghorn]

@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?

[vjeux]

You should use {uri: this.props.image} for non static images

[notduncansmith]

@chirag04 The idea with static images (images that appear in the iOS asset bundle, i.e. Images.xcassets), is that they're bundled with the application and thus there's a fixed number of possible images. So as outlined in the docs linked above, to use images dynamically in the way you're describing, you'd want to require all the images and store those in an object or something. Then do a lookup by key.

Example:

var images = {
  first: require('image!first'),
  second: require('image!second'),
  // ... etc
};
var image = images[this.props.image];
<Image source={image} />

[chirag04]

@notduncansmith That totally works for me! Thanks :+1:

[amasad]

OK so closing for now. However, this will get even better soon (better error messages, better workflow etc)

[debreuil]

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

[amasad]

@debreuil can you open this as a separate issue?

[debreuil]

new issue for jpgs is here now: https://github.com/facebook/react-native/issues/646

[awiss]

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
image!{imagesetName} as well image!{filename}. I am using static strings for all of this.

[SatanWoo]

In v0.4.0, seems running command above not solve the problem? Can someone give me a hint?

[finalquest]

Same here.
In 0.4.0 installing react-native with cocoapods in an existing project.
I have the same issue. The require image!... cant be resolved. I've already try with the above arguments in the packager launch.
Is there anything else that I'm missing?

[amasad]

UPDATE: look at what @ide suggested below, as a last resort do the following:

I'm actually not entirely sure what the issue might be here. To work around this use @JonathanMatthey suggested: {{ uri: "myimage", isStatic: true }}

[ide]

To summarize what's been working:

• Make sure React Native is up to date
• Make sure the RCTImage project is linked
• Use PNGs. Make sure to use .png extension.
• Name your image files the same as the imageset in Xcode's Images.xcassets to reduce any confusion. Ex: your image should be named "foo.png" and Xcode should display the image as "foo".
• Require the image with require('image!foo')
• Restart the packager after all of this just to be sure.

[amasad]

Thanks @ide

Use PNGs. Make sure to use .png extension.

We should be also supporting JPGs now

Additionally, I'm writing up a post about what we're working on to make asset management a lot better.

[ide]

Sweet. I was working on getting local animated GIFs working yesterday and ran into the PNG-only issue so this is exciting to see.

[amasad]

Feel free to send PR's to add any other extensions :+1:

[amasad]

I wrote about what we're working on for the new asset dependency management here: #1043

[larsvinter]

Hi all.

If you rename the file extension from .jpg to .png and then add it again to the asset catalog it works. You don't need to convert the file, just rename it.

I have tested and this has solved the problems in all my projects (am using v0.4.4).

Clearly this is a bug and the renaming is an ugly workaround, but at least it allowed me to finally progress with this.

//Lars

[ghost]

@larsvinter that totally worked. others may be able to bump to a version of react-native which supports jpg file types but I'm stuck on 0.4.2 at the moment and needed a clever solution. you're my hero.

[d-vine]

@larsvinter
+1. Works like a charm.

[arunshan]

Use this source={{ uri: "google", isStatic: true }} instead of require('image!google')

[ghost]

@arunshan how about some env deets or a link to your source to make things
constructive?
On Tue, Jun 16, 2015 at 9:26 PM Josh Habdas [email protected] wrote:

On Tue, Jun 16, 2015 at 8:38 PM arunshan [email protected] wrote:

Use this source={{ uri: "google", isStatic: true }} instead of
require('image!google')

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/521#issuecomment-112620292
.

[ghost]

@arunshan disregard. crossed threads

[paramaggarwal]

I was having a problem where my static image specified as <Image source={require('image!steve-bill-2')} /> was not actually showing up. I debugged and it turns out it is an Xcode problem.

If I add .jpg files to Xcode Images.xcassets, then using [UIImage imageNamed:path] will not return the correct image asset. While using .png assets works. I think this is because only for the special case of PNG files, Xcode does not need the file extension, but for jpg images it does need. We'll need to take care of this inside RCTConvert: + (UIImage *)UIImage:(id)json;.

[fatuhoku]

Use this source={{ uri: "google", isStatic: true }} instead of require('image!google')

This definitely works.

[ghost]

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.

[psschethan]

i have a problem here, im trying to set width and height to navgatorIos rightbuttonIcon..

component: LoginPopup,
title: '',

            onRightButtonPress: this.onRightButtonPress,
             rightButtonIcon: require('image!Icon-Small')  ,
        }} />

[triage]

This is definitely not working for me on 0.8.0 ... I've followed all the steps:

1. Images in Images.xcassets
2. images are png's
3. png's of course named the same as the image sets
4. rebuilt the app
5. restarted npm
6. RCTImage is linked in the project

{{uri:'nameOfImage', isStatic: true}} --> image doesn't show up
require('image!nameOfImage') --> Error: Requiring unknown module "image!nameOfImage"

[paramaggarwal]

I have noticed that RN expects the underlying filename to be the same as the name of the asset in Images.xcassets. Right click > Open in Finder and check the names of the underlying assets.

[triage]

@paramaggarwal I've definitely got that right ... it's foo in Images.xcassets, foo.png, [email protected], [email protected] in Finder, and i'm trying with require('image!foo')

[d-vine]

@triage try to rename the png to jpg. not convert, just rename. I know it's a hack but it worked for me.

[javache]

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.

[yelled3]

Hey @javache I'm using "react-native": "0.12.0",
none of the above worked for me.
I was able to load some images from xcassets, but for some reason specific images are not loaded.
my only solution was to:

• copy the assets to a side folder
• rename them
• create a new Image Set in xcassets
• and then add the renamed images back

nothing else seemed to work.
thoughts?

[triage]

the setup that got me in to trouble is:

1. I have one project/workspace/repo for the iOS app
2. another for the react app, ergo Images.xcassets isn't nearly in the same folder as the react project.

I was really hoping that, under the hood, {{uri:'nameOfImage', isStatic: true}} just boiled down to:
UIImage(named: "nameOfFile") and therefore would show up regardless of the bundle that it's in, or the path to the bundle relative to react, etc.

[shaunbjohnson]

In package.json:
"react-native": "^0.14.2"

In index.ios.js:
<Image source={require('image!logo')} style={styles.logo} />

In Images.xcassets:

AppIcon
logo

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

[SFantasy]

@shaunbjohnson Have you solve the problem?

[r6203]

@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.
But that won't help much since building the project afterwards isn't possible, again.

Any fix for this?

edit: Found this fix: http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native
Seems in 0.14.2 images can now be loaded as 'normal' node packages.
Had to replace "require('image!logo')" with "require('./img/logo.png')" and put the logo.png file into a folder called 'img' at the same level of my depending source file.

[troywatt]

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]

@troywatt these issues may help:
https://github.com/facebook/react-native/issues/3888
https://github.com/facebook/react-native/pull/3889.

[troywatt]

@ippy04 Thanks, this was helpful!

[Creemli]

Use this source={{ uri: "google", isStatic: true }} instead of require('image!google')
this also works for me~~ (0.18.0-rc & integrating with existing apps)

[gorjanz]

using React-Native 0.22.0 with ordinary (react-native-cli init) setup, and inline require does not work...

[alfonsogoberjr]

None of the above has worked for me. 0.42.3

[rsp8055]

How can i save/store device captured image to remote pc folder. Is it possible in react native?
and
How do post image to mysql database through php in react native
if anyone having solution please notify me on: [email protected]