CODEWITHSUNDEEP
iosimagereact-native
Hasen
Hasen

Reputation: 12304

React Native image as string not found

This works just fine:

<Image source={require('./imgs/animage.jpg')}></Image>

This returns an error:

var theimage = './imgs/animage.jpg';

<Image source={require(theimage)}></Image>

The error returned is:

"Requiring unknown module './imgs/animage.jpg'. If you are the module is there, try restarting the package"

Really no idea what the problem is.

This works:

var theimage = require('./imgs/animage.jpg');

But this still does not:

var theimage = 'animage';
var theimage = require('./imgs/' + theimage + '.jpg');

I can't see any way to produce images dynamically.

Upvotes: 0

Views: 3275

Answers (2)

d-vine
d-vine

Reputation: 5547

You are correct. The new asset system (as well as the old require('image!xyz')) are for static images only. This is because all the images paths are figured out statically in the build step without the program being run. At this point the build system doesn't know about variables.

So you have to use

<Image source={{uri: theimage}}></Image>

But the URI can have folders. In order to always have your up-to-date resource folder compiled into the app during each build you need to create a folder link in your Xcode project not a group. A group only contains the files that are there at the time you create the group. A folder link reflects the actual content of that folder. E.g. you have a folder somewhere in your project called images. In there is a folder backgrounds with a file my_background.jpg. You add images as folder reference to your project. Then you can use

{uri: 'images/backgrounds/my_background.jpg'}

Upvotes: 2

Hasen
Hasen

Reputation: 12304

It doesn't seem to be possible with the above coding for some reason. Here is one solution I found:

var theimage = 'animage.jpg';

<Image source={{uri: theimage}}></Image>

All the images have to be added to the xcode project. This way, their location can't be separated by folders however.

Upvotes: 0

Related Questions