1

I get data from DB and put it into source image, it will be error, but if i put only string it will run ok

Run ok: <Image source={require('./src/image/honda-accord.png')} />

Run fail: <Image source={require("./src/image/" + carOfPerson[0]["cars"][i]["picture"] + "")} />

Value of carOfPerson[0]["cars"][i]["picture"] is honda-accord.png

Image error was taked screen snapshot in android emulator: enter image description here

And console log in log cat:

  Body:
{"type":"TransformError","lineNumber":0,"errors":[{"description":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","lineNumber":0}],"name":"SyntaxError","message":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","stack":"Error: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:247:19\n    at Generator.next (<anonymous>)\n    at step (F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:40:30)\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:51:15"}
    at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:296)
    at com.facebook.react.devsupport.BundleDownloader.access$200(BundleDownloader.java:37)
    at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:174)
    at okhttp3.RealCall$AsyncCall.execute(RealCall.java:153)
    at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
    at java.lang.Thread.run(Thread.java:764)

Thanks for all the help.

Hoang
  • 829
  • 11
  • 18

2 Answers2

1

React Native at the moment doesn't support dynamic require calls, i.e. you have to pass a complete constant string inside your require statement for it to work.

See this github issue for more details: https://github.com/facebook/react-native/issues/6391

mehulmpt
  • 15,861
  • 12
  • 48
  • 88
1

You need to require the source in the array so that React Native can display your images dynamically. In carOfPerson array requires the link to the images

instead of ['img1', 'img2'], you will have [require('img1'), require('img2')]

Thomas Vu
  • 105
  • 1
  • 7