React-native: 'Requring invalid module "image!my-icon"' error when trying to include static image

[clauderic]

When I try to require static assets as per http://facebook.github.io/react-native/docs/image.html#static-assets, I get the following error:

"Requring invalid module "image!my-icon". If you are sure the module is there, try restarting the packager."

Not sure if there are any steps I'm missing? I've included the asset in my Images.xcassets library

[jimmyhmiller]

I don't know what is causing this issue, but ide in the irc told me to manually run:

$ node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

And that seems to work.

[clauderic]

That didn't seem to do the trick unfortunately. Any other ideas of things I might have missed?

[clauderic]

The above fix worked, thanks!

[amasad]

published v0.2.1

[lazywei]

Where should I put the static assets then? in iOS/Images.xcassets?

[pedro]

@amasad it seems like the fix in #286 was later reverted by 31c4ff0?
but fwiw I applied that diff manually to my packager and still couldn't get images to work. Inspecting the ReactPackager middleware to see if I can debug this further.

[amasad]

@pedro uggh that's clowny, I'll get it back shortly

[amasad]

brought this back in v0.3.1

[syrnick]

That patch worked for me. @pedro did you do npm install react-native -g instead of npm install react-native -s by any chance?

@amasad It's a bit fragile, because node_modules can be pretty much anywhere relative to the xcode project.

[JonathanMatthey]

@amasad has this bug definitely been closed ?

it originally didn't work, then worked for 2 days and now i've tried importing different images, on 3 different projects, and none work, even in the examples projects...

tried both launching default packager.sh and the command line where you specify assetRoots

always RED SCREEN: requiring unknown module...

[pedro]

Odd, still having issues here too. I have the react-native package installed locally with my app (under node_modules in the root folder).

[pedro]

ah, doh, was just using it wrong.

Not familiar with Images.xcassets, thought I needed to refer to images by the name of the group I defined in Xcode. But debugging the react-native packager I saw it still adds assets by the original image name, so using these instead works.

[amasad]

It should work now. But I know it's painful, working on making it a lot nicer.

[dickyj]

Hi,
Now I seem to be facing the same issue, referring to the images by the image name does not work. E.g.
I have Avatar.png, [email protected], [email protected] in my Images.xcassets, and I use require('image!Avatar') does not work.
Any clues?

I also used this to launch, also does not work...
$ node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

[josebalius]

I am also facing this problem, can't seem to get it to work, any ideas?

[amasad]

What are the errors you're seeing?

[josebalius]

@amasad I am getting the error at the title of the thread. I did a bit more reading and named the image set the same as the file name of the image, and that seems to have fixed it.

[SatanWoo]

Face the same problem....

[josebalius]

@SatanWoo make sure you use the same name of the original filename as the name of your image set. That seemed to work for me.

[fkilaiwi]

same.. its not working. When you talk about
node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

where should u run it from ?

[amasad]

Can you follow the instructions in this comment: https://github.com/facebook/react-native/issues/521#issuecomment-96827744

[dickyj]

Mine seems to work now. Thanks. Apparently I was trying to make it dynamic:

var icon = 'Avatar';

require('image!'+icon)

That does not work.

[vjeux]

@dickyj can you paste the error that's generated when you do it? We should probably improve the wording so that you don't have to open an issue each time :)

[dickyj]

@vjeux its the same error message as the one here:
http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native

Its actually very misleading error message, since it says it cannot find "image!Avatar" but when I hard coded it, it works.

[TylerYang]

@josebalius Amazing!!! I face the same issue 5 mins ago, then I saw your comment, instead of click + button to add a new image, I just dragged it to Images.xcassets.(Didn't change the name). It's working now.
Thx!!!

[stefanopiovesan]

Same for me. Images.xcassets + with Import didn't worked, drag'n'drop solved the issue.

[fatuhoku]

Local image loading doesn't work for me at all still.

 ...
        <Image
          style={styles.icon}
          source={require('image!xyz')}
        />
 ...

var styles = StyleSheet.create({
  icon: {
    width: 360,
    height: 360,
  }
});

I get this error:

Requiring unknown module "image!xyz". If you are sure the module is there, try restarting the packager."

[ma94264]

The solution worked for me is to change the name of your image to be the same as the name of Image Set.

For example, when you add a new image set named "fb", all images assigned to this set has to be named as "fb.png"

[adamterlson]

@ma94264 That worked for me as well, thanks for the tip. The file name associated with the image set must match the image set name (just to be super clear, that is, dragging "YourImage.png" from explorer into the ImageSet named "YourImage").

[itinance]

Thank you @ma94264!

[Creemli]

I also have a problem just like this, could you help me out?

http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native/33472934#33472934

[philipengberg]

I'm experiencing the same problem still, exactly like @Creemli

[anback]

I have a workaround, I am not proud of it but nevertheless, if you include the images in the top root of the applications with the filenames not dynamically generated (and hide them with height : 0 or something, you can then later in the application dynamically generate the names. Here is an example of my top node:

<React.View>
    <Image source={require('image!allowance')} style={[{height : 0}]}></Image>
    <Image source={require('image!logotype')}  style={[{height : 0}]}></Image>
    <Image source={require('image!savings')}  style={[{height : 0}]}></Image>
    <Image source={require('image!tasks')}  style={[{height : 0}]}></Image>
    {this.props.children}
</React.View>

and later down in the application in a render function:

<Image style={this.getStyles()} source={require(`image!${this.getImageName()}`)} />

[Creemli]

@philipengberg I have fixed this issue today. And the following is my situation:
if you are in rn project () you must make sure that the RCTImage in your peoject.
And if you are integrating with Existing Apps, you must add depends in your podfile:
pod 'React', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket'
]

[anback]

My problem was that i was using 0.14. With 0.14 you can easily import images by just require('.myimage.png')

[adekbadek]

It should be mentioned that you don't have to put the images in Images.xcassets - you just put them in the project root and then just require('./myimage.png') as @anback wrote
Look at this SO answer and the pull it references

[Creemli]

If we do not use the images.xcassets, does it mean that rn will not use the image loader of oc, and whether the performance is good?

[grabbou]

@Creemli they are added to assets transparently by the packager in the production mode (performance is the same) and end up in the cer file iOS uses as an archive for all assets.

[steveleec]

I have a similar issue.

//This works perfectly:

 <Image
                source={require('../img/burguer-menu.png')}
                style={[{ width: 15, height: 15}]}/>

//This won't work for some reason:
// this.props.iconName = 'burguer-menu';
 <Image
                source={require('../img/' + this.props.iconName + '.png')}
                style={[{ width: 15, height: 15}]}/>

Any suggestion?

[tehong]

+1, Same for me. Using concatenated string or string variable doesn't work for me either in the "require()". This makes my program more complex and I often need to use variables for my images. Now I have to do a switch() and hard code my image strings in multiple require().

[tuneZola]

What about svg images?

[xdamman]

+1

[mihail-petkov]

+1

[niftylettuce]

+1

[grabbou]

As per @tehong and @steveleec comment, you can workaround it by:

const iconsMap = {'burger-menu': require('../img/burger-menu.png')};

then, in component:

// this.props.icon 'burger-menu'
<Image src={iconsMap[this.props.icon} />

so instead of dynamic image referencing we just dynamically access iconsMap. To me, that's relatively good solution and given my understanding of iOS ecosystem from the native developer perspective, the only one available.

Anyway, it is worth noting that this issue is about something different, so if there are any +1 being added, I'd suggest making a new issue (or going to a proper one because there was a note about that in the past) and checking product pains. Otherwise, it's generating unnecessary noise suggesting that original issue is still occurring.

[peterbabukh]

Thank you, grabbou. You saved me with this solution.

[waleedarshad-vf]

I am using react-native 0.27.2 and image is not showing in released.apk but working fine in development any reason?

[Proberts]

+1 same for me in 0.35 and 0.36. Works fine in debug when pulled from the server. Fails when looking in the APK. The unzippped APK does have the image in it with name mangling.

require("src/js/common/img/logo.png") <-- works in debug, not in release
Logcat Error: E/ReactNativeJS(13502): Requiring unknown module "src/js/common/img/logo.png"

APK file verified: /res/drawable-mdpi-v4/js_common_img_logo.png

I have a release build against RN 0.33 which works as expected.