Typescript + Reactjs - Imported svg does not render

Question

I was migrating some of my React files over to .tsx files and had errors on my svg imports:

import logo from './logo.svg'; // [ts] cannot find module './logo.svg'

So, I changed it to:

const logo = require('./logo.svg') as string

which fixed up the transpiler errors.

I am rendering it using React Bootstrap's Image tag:

<Image src={logo} className="..." />

However, that image does not render at all. I have tried changing the type to as any but no cigar. Can anyone help me?

Answer 1

Make sure you have the file images.d.ts in your root folder (next to tsconfig.json, etc) with the following contents:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'