title: Could Not Find Image File in React Native
body: <p>I have defined a React Native class that is designed to fill a "tableView" cell with an image reference that is a prop input to the class. This is invoked with the use of FlatList. However, this class is unable to find the input image reference in the bundle when specified using an Image source tag. It can only be found if it is a hard coded reference.</p>
  
  <p>The class is defined as follows:</p>
  
  <pre><code>class ListItem extends React.PureComponent {
      _onPress = () =&gt; {
          this.props.onPressItem(this.props.index);
      }
  
      render() {
          const item = this.props.item; 
  
          console.log("ChannelSelection Mix Button artwork: ", item.artwork);
          return (
            &lt;TouchableHighlight
              onPress={this._onPress}
              underlayColor="transparent"&gt;
              &lt;View&gt;
                &lt;View style={styles.rowContainer}&gt;
                  &lt;Image source={{ uri: item.artwork }} style={styles.buttonContainer} /&gt;
                  &lt;View style={styles.mixButtonTitleContainer}&gt;
                    &lt;Text style={styles.mixButtonTitle}
                      numberOfLines={2}&gt;{item.channelTitle}&lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/TouchableHighlight&gt;
          );
      }
  }
  </code></pre>
  
  <p>When this class in invoked, I get a warning that says:</p>
  
  <pre><code>Warning
  Could not find image file:///Users/myname/Library/Developer/CoreSimulator/Devices/34AE8A68-E69D-4804-B3C4-96DE7A051B9B/data/Containers/Bundle/Application/C79368E9-3D1B-492C-B72B-9BF5C4D3262B/myApp.app/./Resources/MissingAlbumArt.png
  </code></pre>
  
  <p>The console output to print item.artwork is:</p>
  
  <pre><code>'ChannelSelection Mix Button artwork: ', './Resources/MissingAlbumArt.png'
  </code></pre>
  
  <p>so you can see that the name of the file is being passed in correctly.</p>
  
  <p>Note that if I change the line:</p>
  
  <pre><code>&lt;Image source={{ uri: item.artwork }} style={styles.buttonContainer} /&gt;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>&lt;Image source={require('./Resources/MissingAlbumArt.png')} style={styles.buttonContainer} /&gt;
  </code></pre>
  
  <p>then the error goes away.</p>
  
  <p>So, how can I properly reference the .png files in my Resources directory? And why are my .png files not in the Resources directory of my bundle?</p>