title: What is the correct syntax for import images
body: <p>I recently started using React Native and have problem with displaying local and external Images on Android emulator (<a href="https://github.com/futurice/pepperoni-app-kit" rel="nofollow noreferrer">Pepperoni starter kit</a>). In example I have Simple component:</p>
  <pre class="lang-js prettyprint-override"><code>class SomeView extends React.Component {
      render() {
          const a = require(&quot;image!somepic&quot;)
          console.log(a)
          return (
              &lt;View&gt;
                  &lt;Image source={require(&quot;image!somepic&quot;)} style={styles.img}&gt;
                      &lt;Text&gt;?&lt;/Text&gt;
                  &lt;/Image&gt;
  
                  &lt;Image source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} style={[styles.img, { width: 50, height: 50 }]}&gt;
                      &lt;Text&gt;?&lt;/Text&gt;
                  &lt;/Image&gt;
              &lt;/View&gt;
          )
      }
  }
  </code></pre>
  <p>And here is what I got:</p>
  <p><a href="https://i.stack.imgur.com/QbnFH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbnFH.png" alt="" /></a></p>
  <p>Though, in real device, external image was loaded, but local also was not loaded.</p>
  <p>What I got in console (is object for local image):</p>
  <pre class="lang-none prettyprint-override"><code>{
      &quot;__packager_asset&quot;:true,
      &quot;path&quot;:&quot;D:\\Dev\\pepperoni-app-kit\\images\\somepic@3x.png&quot;,
      &quot;uri&quot;:&quot;somepic&quot;,
      &quot;width&quot;:15.333333333333334,
      &quot;height&quot;:45.333333333333336,
      &quot;deprecated&quot;:true
  }
  </code></pre>
  <p>I’m using React Native on Windows 10, ReactNative version 0.28.0. Local images located at folder <code>./images/</code>. (I include several sizes: <code>somepic.png</code>, <code>somepic@2x.png</code>, <code>somepic@3.png</code>.)</p>