title: Vue & Typescript: Image imports not found
body: <h2>Problem</h2>
  <p>I'm currently working on a Vue project using Typescript. Inside my assets folder I have some images I want to import with a separate Typescript file.</p>
  <hr/>
  <h2>Background</h2>
  <p>This project is bootstrapped by the vue-cli using Typescript, version <code>3.2.1</code>. What I have tried is directly importing into my file using require, which did not work. I then tried importing with <code>import</code> to no avail</p>
  <hr/>
  <h2>Code</h2>
  <p>This is what I've tried:</p>
  <pre><code>./src/myFile.ts
  import Image from '@/assets/img/hello.png';
  </code></pre>
  <p>Does not work</p>
  <pre><code>./src/myFile.ts
  import Image from '../assets/img/hello.png';
  </code></pre>
  <p>Does not work</p>
  <pre><code>./src/myFile.ts
  const Image = require('../assets/img/hello.png');
  </code></pre>
  <p>Does not work</p>
  <hr/>
  <h2>Result</h2>
  <p>The bundler will throw an error along the lines of <code>Relative modules were not found</code> followed by the path of the file. I have made sure that the path is correct and I suspect this has to do with how TypeScript manages imports and how the Vue-cli is configured to bundle my files.</p>
  <h2>Screenshot</h2>
  <p>Here is a screenshot of the actual project. The file path is <code>./src/views/World/Combat/Game.ts</code>:
  <a href="https://i.stack.imgur.com/m7pio.png" rel="noreferrer"><img src="https://i.stack.imgur.com/m7pio.png" alt="Project tree screenshot" /></a></p>