Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 22, 2022 09:34 am GMT

Add images to a React project with Typescript

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;

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'

The first time I saw that error, I thought Its 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";

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
  1. update your webpack config file to use the file-loader module like this
...{ test: /\\.(png|jp(e*)g|svg|gif)$/, use: ['file-loader'], }...

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


Original Link: https://dev.to/minompi/add-images-to-a-react-project-with-typescript-4gbm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To