Skip to content
Search

DEV Community

Cover image for Add images to a React project with Typescript
AlessandroMinoccheri
AlessandroMinoccheri

Posted on • Originally published at minompi.Medium

 

Add images to a React project with Typescript

#react #javascript #typescript #webpack

In every single project, usually, you need to add an image to your React project to show something or to represent a graph and create a beautiful page for your audience.

Adding an image with React is very simple and fast, this is an example:

import React from "react";
import imageToAdd from "./../assets/images/logo.png";
function YourComponent() {
   return <img src={imageToAdd} alt="Image" />;
}
export default YourComponent;
Enter fullscreen mode Exit fullscreen mode

This works like a charm in a React project built using CRA or Vite.
but if your project has a custom bundler, created using Typescript + Webpack, with the code above you will receive this error:

Cannot find module  './../assets/images/logo.png'
Enter fullscreen mode Exit fullscreen mode

The first time I saw that error, I thought “It’s a bug!”, but after searching and understanding typescript well, I discovered that receiving an error is the correct behavior.

By default in typescript, the module resolution resolves the import using only the files with extension: .ts .tsx or .d.ts and this is the reason why in the previous case the module couldn't be found.

So, how can we fix the problem?
To solve the problem, usually, you have to:

  1. add a directory called types on your project's root

  2. create inside of that folder a file called index.d.ts with the following content

declare module "*.jpg";
declare module "*.png";
Enter fullscreen mode Exit fullscreen mode

N.B. the extension depends on the file type you are adding.

  1. install the file-loader dependence using npm, yarn or pnpm 
npm install --save-dev file-loader
Enter fullscreen mode Exit fullscreen mode
  1. update your webpack config file to use the file-loader module like this 
...
{ test: /\\.(png|jp(e*)g|svg|gif)$/, use: ['file-loader'], }
...
Enter fullscreen mode Exit fullscreen mode

Then, you can run your application, your build will succeed and your image will appear! 🎩

Top comments (4)

Collapse
 
lukeshiru profile image
Luke Shiru •

Is better to type them as string instead of any:

declare module "*.jpg" {
    const path: string;
    export default path;
}

declare module "*.png" {
    const path: string;
    export default path;
}
Enter fullscreen mode Exit fullscreen mode

That way if you accidentally pass the image path to a thing that isn't expecting a string, you'll get type checking errors for it.

Cheers!

Collapse
 
minompi profile image
AlessandroMinoccheri •

Thanks @lukeshiru I agree with you!

Collapse
 
niki228041 profile image
cho •

after { test: / one '\' - not needed

Collapse
 
mirescordeiro profile image
Tamires Cordeiro •

What a short and efficient article!
I just preferred to call the file custom.d.ts.
Thanks

DEV Community

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

Read next

genne23v profile image

Create BullMQ Workflow

Genne23v -

vatana7 profile image

Ever wonder why React's setState doesn't update immediately?

vatana7 -

patilganesh1010 profile image

Resources You Should Follow to Stay updated with Latest Tech Trends

Ganesh Patil -

thexdev profile image

The new React docs

M. Akbar Nugroho -