title: Displaying a static image using React, Typescript and Webpack
body: <p>I'm attempting to display an image in a React component as part of a project using webpack and webpack-dev-server.</p>
  
  <p>So far I have completed the following steps:</p>
  
  <ul>
  <li>Used npm to install file-loader</li>
  <li>Updated webpack.config.js to add a loader for image files</li>
  <li>Imported the image I want into my component</li>
  <li>Used the import in my img tag</li>
  </ul>
  
  <p>Having taken these steps, webpack fails to compile with a 'cannot find module' error:</p>
  
  <pre><code>ERROR in [at-loader] ./src/components/App.tsx:4:26
      TS2307: Cannot find module '../images/kitten-header.jpg'.
  </code></pre>
  
  <p>My folder structure is as follows:</p>
  
  <pre><code>/dist
     /images
        kitten-header.jpg
     bundle.js
     bundle.js.map
  /node_modules
     (content ignored for brevity)
  /src
     /components
        App.tsx
     /images
        kitten-header.jpg
     /styles
        App.less
     index.tsx
  index.html
  package.json
  tsconfig.json
  webpack.config.js 
  </code></pre>
  
  <p>The new loader that I added to my webpack.config.js is:</p>
  
  <pre><code>test: /\.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]"
  </code></pre>
  
  <p>I've imported the image file, in App.tsx, like this:</p>
  
  <pre><code>import kittenHeader from '../images/kitten-header.jpg';
  </code></pre>
  
  <p>...and used the import in an img tag like this:</p>
  
  <pre><code>&lt;img src={ kittenHeader } /&gt;
  </code></pre>
  
  <p><b>Note:</b> Full text of webpack.config.js and App.tsx were provided until I got a little bit closer to the answer and realized they weren't relevant (see update 1).</p>
  
  <p>I assume I'm making some very trivial error with regards to the relative path in the import.  As you can imagine, I've tried various alternatives.</p>
  
  <p>Can anyone provide some insight?</p>
  
  <p>For reference, as I'm continuously hitting articles and questions relating to the wrong version of webpack, here are my versions:</p>
  
  <ul>
  <li>React 15.5.4</li>
  <li>Webpack 2.6.1</li>
  <li>Webpack-dev-server 2.4.5</li>
  <li>TypeScript 2.3.2</li>
  </ul>
  
  <p><hr/>
  <b>Update 1:</b> 2017.06.05<br/>
  So, looking at <a href="https://stackoverflow.com/questions/42793207/webpack-loader-cannot-find-module" title="another question with basically the same problem">this SO question</a> and <a href="https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10" rel="noreferrer" title="the same thing, but with CSS">this post on Medium</a>, I've been able to identify that the problem lies not with how I've used webpack, but with that fact that I'm using TypeScript.  The error is a typescript error caused by the fact that the typescript compiler doesn't know what a .jpg file is.</p>
  
  <p>Apparently, I'm going to need to provide a d.ts file or use a require statement.</p>
  
  <p>Almost there...</p>