Vue & Typescript: Image imports not found

Question

Problem

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.

---

Background

This project is bootstrapped by the vue-cli using Typescript, version 3.2.1. What I have tried is directly importing into my file using require, which did not work. I then tried importing with import to no avail

---

Code

This is what I've tried:

./src/myFile.ts
import Image from '@/assets/img/hello.png';

Does not work

./src/myFile.ts
import Image from '../assets/img/hello.png';

Does not work

./src/myFile.ts
const Image = require('../assets/img/hello.png');

Does not work

---

Result

The bundler will throw an error along the lines of Relative modules were not found 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.

Screenshot

Here is a screenshot of the actual project. The file path is ./src/views/World/Combat/Game.ts:

Answer 1

Create a file named shims-png.d.ts in /src/ with this content:

declare module "*.png" {
  const value: string;
  export default value;
}

Stop and run the app again.