1
<Image source={require(rowData.avatar)} />

error : Unknown name module ‘xxxxxx’

Why can print out the path but can't read pictures？

Abigale YPC
  • 11
  • 2
  • Possible duplicate of ['Error: Unknown named module', loading react-native image from a dynamic path](https://stackoverflow.com/questions/35713025/error-unknown-named-module-loading-react-native-image-from-a-dynamic-path) – Michael Cheng Jun 22 '17 at 01:31
  • Check these links: https://stackoverflow.com/questions/44468500/image-react-native-not-working https://stackoverflow.com/questions/44675100/image-uri-wont-load-when-using-setstate – Jigar Shah Jun 22 '17 at 06:02

2 Answers2

0

Try

  <Image source={(rowData.avatar)} />
Victor
  • 4,171
  • 1
  • 29
  • 37
0

Images cannot use dynamically generated sources. Assuming what you're trying to do is to load an image as part of your package, your code must read:

const avatar = require('./path/to/avatar.jpg');

Only then you can use avatar as your source a follows:

rowData = {
    avatar: avatar
}

<Image source={rowData.avatar} />

If you know before hands what images are going to be needed in your app, I suggest that you create an asset file in which you add all your hardcoded require, such as:

// assets.js
return {
    avatar1: require('./path/to/file.jpg'),
    avatar2: require('./path/to/file.jpg'),
    avatar3: require('./path/to/file.jpg'),
}

And then you would construct your rowData as follows:

import avatars from './assets';

rowData = {
    avatar: avatars['avatar1']
}

Where you would likely replace avatar1 with a variable containing the key pointing to the avatar you're interested in.

Here is an asset file I used for one of my projects.

FMCorz
  • 2,586
  • 1
  • 21
  • 18