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

Closed
JonathanMatthey opened this Issue Mar 31, 2015 · 61 comments

Comments

Projects
None yet
@JonathanMatthey

JonathanMatthey commented Mar 31, 2015

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

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski commented Mar 31, 2015

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

@amasad

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Mar 31, 2015

Contributor

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.

Contributor

amasad commented Mar 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@willpiers

willpiers Mar 31, 2015

Contributor

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

Contributor

willpiers commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

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

wski commented Mar 31, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 31, 2015

Collaborator

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.

Collaborator

chirag04 commented Mar 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@notduncansmith

notduncansmith Mar 31, 2015

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)

notduncansmith commented Mar 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Mar 31, 2015

Contributor

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

Contributor

amasad commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

@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

wski commented Mar 31, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@notduncansmith

notduncansmith Mar 31, 2015

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

notduncansmith commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

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

wski commented Mar 31, 2015

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

@chirag04

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 31, 2015

Collaborator

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

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

Collaborator

chirag04 commented Mar 31, 2015

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

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

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

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

wski commented Mar 31, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Mar 31, 2015

Contributor

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

Contributor

amasad commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

@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

wski commented Mar 31, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 31, 2015

Collaborator

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

Collaborator

chirag04 commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

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

wski commented Mar 31, 2015

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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Mar 31, 2015

Collaborator

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

Collaborator

chirag04 commented Mar 31, 2015

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

@wski

This comment has been minimized.

Show comment
Hide comment
@wski

wski Mar 31, 2015

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

wski commented Mar 31, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Mar 31, 2015

Contributor

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

Contributor

vjeux commented Mar 31, 2015

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

@notduncansmith

This comment has been minimized.

Show comment
Hide comment
@notduncansmith

notduncansmith Mar 31, 2015

@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} />

notduncansmith commented Mar 31, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Apr 1, 2015

Collaborator

@notduncansmith That totally works for me! Thanks 👍

Collaborator

chirag04 commented Apr 1, 2015

@notduncansmith That totally works for me! Thanks 👍

@amasad

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Apr 1, 2015

Contributor

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

Contributor

amasad commented Apr 1, 2015

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

@amasad amasad closed this Apr 1, 2015

@debreuil

This comment has been minimized.

Show comment
Hide comment
@debreuil

debreuil Apr 3, 2015

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 commented Apr 3, 2015

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

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad Apr 3, 2015

Contributor

@debreuil can you open this as a separate issue?

Contributor

amasad commented Apr 3, 2015

@debreuil can you open this as a separate issue?

@debreuil

This comment has been minimized.

Show comment
Hide comment
@debreuil

debreuil Apr 3, 2015

new issue for jpgs is here now: #646

debreuil commented Apr 3, 2015

new issue for jpgs is here now: #646

@awiss

This comment has been minimized.

Show comment
Hide comment
@awiss

awiss Apr 19, 2015

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.

awiss commented Apr 19, 2015

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

This comment has been minimized.

Show comment
Hide comment
@SatanWoo

SatanWoo Apr 26, 2015

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

SatanWoo commented Apr 26, 2015

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

@finalquest

This comment has been minimized.

Show comment
Hide comment
@finalquest

finalquest Apr 27, 2015

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?

finalquest commented Apr 27, 2015

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?

@vjeux vjeux reopened this Apr 27, 2015

@dvine-multimedia

This comment has been minimized.

Show comment
Hide comment
@dvine-multimedia

dvine-multimedia Jun 4, 2015

@larsvinter
+1. Works like a charm.

dvine-multimedia commented Jun 4, 2015

@larsvinter
+1. Works like a charm.

@arunshan

This comment has been minimized.

Show comment
Hide comment
@arunshan

arunshan Jun 17, 2015

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

arunshan commented Jun 17, 2015

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

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Jun 17, 2015

@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 jhabdas@gmail.com wrote:

On Tue, Jun 16, 2015 at 8:38 PM arunshan notifications@github.com wrote:

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


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

jhabdas commented Jun 17, 2015

@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 jhabdas@gmail.com wrote:

On Tue, Jun 16, 2015 at 8:38 PM arunshan notifications@github.com wrote:

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


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

@jhabdas

This comment has been minimized.

Show comment
Hide comment
@jhabdas

jhabdas Jun 17, 2015

@arunshan disregard. crossed threads

jhabdas commented Jun 17, 2015

@arunshan disregard. crossed threads

@paramaggarwal

This comment has been minimized.

Show comment
Hide comment
@paramaggarwal

paramaggarwal Jun 19, 2015

Contributor

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

Contributor

paramaggarwal commented Jun 19, 2015

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

This comment has been minimized.

Show comment
Hide comment
@fatuhoku

fatuhoku Jul 12, 2015

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

This definitely works.

fatuhoku commented Jul 12, 2015

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

This definitely works.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 4, 2015

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.

ghost commented Aug 4, 2015

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

This comment has been minimized.

Show comment
Hide comment
@psschethan

psschethan Aug 6, 2015

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={{
component: LoginPopup,
title: '',

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

psschethan commented Aug 6, 2015

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={{
component: LoginPopup,
title: '',

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

This comment has been minimized.

Show comment
Hide comment
@triage

triage Oct 14, 2015

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"

triage commented Oct 14, 2015

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

This comment has been minimized.

Show comment
Hide comment
@paramaggarwal

paramaggarwal Oct 14, 2015

Contributor

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.

Contributor

paramaggarwal commented Oct 14, 2015

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

This comment has been minimized.

Show comment
Hide comment
@triage

triage Oct 14, 2015

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

triage commented Oct 14, 2015

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

@dvine-multimedia

This comment has been minimized.

Show comment
Hide comment
@dvine-multimedia

dvine-multimedia Oct 14, 2015

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

dvine-multimedia commented Oct 14, 2015

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

@javache

This comment has been minimized.

Show comment
Hide comment
@javache

javache Oct 17, 2015

Member

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.

Member

javache commented Oct 17, 2015

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.

@javache javache closed this Oct 17, 2015

@yelled3

This comment has been minimized.

Show comment
Hide comment
@yelled3

yelled3 Oct 22, 2015

Contributor

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?

Contributor

yelled3 commented Oct 22, 2015

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

This comment has been minimized.

Show comment
Hide comment
@triage

triage Oct 22, 2015

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.

triage commented Oct 22, 2015

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

This comment has been minimized.

Show comment
Hide comment
@shaunbjohnson

shaunbjohnson Nov 10, 2015

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

shaunbjohnson commented Nov 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@SFantasy

SFantasy Nov 11, 2015

@shaunbjohnson Have you solve the problem?

SFantasy commented Nov 11, 2015

@shaunbjohnson Have you solve the problem?

@r6203

This comment has been minimized.

Show comment
Hide comment
@r6203

r6203 Nov 11, 2015

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

r6203 commented Nov 11, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@troywatt

troywatt Dec 8, 2015

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?

troywatt commented Dec 8, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ippy04

ippy04 Dec 8, 2015

@troywatt these issues may help:
#3888
#3889.

ippy04 commented Dec 8, 2015

@troywatt these issues may help:
#3888
#3889.

@troywatt

This comment has been minimized.

Show comment
Hide comment
@troywatt

troywatt Dec 8, 2015

@ippy04 Thanks, this was helpful!

troywatt commented Dec 8, 2015

@ippy04 Thanks, this was helpful!

@Creemli

This comment has been minimized.

Show comment
Hide comment
@Creemli

Creemli Jan 15, 2016

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)

Creemli commented Jan 15, 2016

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)

LeoLeBras referenced this issue in LeoLeBras/react-native-redux-starter-kit Feb 14, 2016

@gorjanz

This comment has been minimized.

Show comment
Hide comment
@gorjanz

gorjanz Mar 23, 2016

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

gorjanz commented Mar 23, 2016

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

@alfonsogoberjr

This comment has been minimized.

Show comment
Hide comment
@alfonsogoberjr

alfonsogoberjr Mar 31, 2017

None of the above has worked for me. 0.42.3

alfonsogoberjr commented Mar 31, 2017

None of the above has worked for me. 0.42.3

@rsp8055

This comment has been minimized.

Show comment
Hide comment
@rsp8055

rsp8055 Aug 22, 2017

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: rsp8055@gmail.com

rsp8055 commented Aug 22, 2017

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: rsp8055@gmail.com

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.