Display a static image using React, Typescript and Webpack

Question

I am trying to display an image in a React component as part of a project using webpack and webpack-dev server.

So far I have completed the following steps:

• Used by npm to install the file loader
• Updated webpack.config.js file to add bootloader for image files.
• Imported image that I want into my component
• Used import in my img tag

Having done these steps, the web package will not be able to compile with the error "cannot find the module":

ERROR in [at-loader] ./src/components/App.tsx:4:26 TS2307: Cannot find module '../images/kitten-header.jpg'. 

My folder structure is as follows:

 /dist /images kitten-header.jpg bundle.js bundle.js.map /node_modules (content ignored for brevity) /src /components App.tsx /images kitten-header.jpg /styles App.less index.tsx index.html package.json tsconfig.json webpack.config.js 

The new bootloader that I added to my webpack.config.js file:

 test: /\.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]" 

I imported the image file in App.tsx, for example:

 import kittenHeader from '../images/kitten-header.jpg'; 

... and used the import in the img tag as follows:

 <img src={ kittenHeader } /> 

Note. The full text of webpack.config.js and App.tsx was provided until I came close to the answer and realized that they were not relevant (see Update 1).

I assume that I am making a very trivial mistake regarding the relative import path. As you can imagine, I tried various options.

Can someone give an idea?

For reference, as I constantly come across articles and questions regarding the wrong version of webpack, here are my versions:

• React 15.5.4
• Webpack 2.6.1
• Webpack-dev-server 2.4.5
• TypeScript 2.3.2

<h / "> Update 1: 2017.06.05
So, looking at this SO question and this post on Medium , I was able to determine that the problem is not how I used webpack, but that I am using TypeScript. Error - typescript error caused by the typescript compiler not knowing what a .jpg file is.

Apparently I need to provide a d.ts file or use the require statement.

Almost there ...

Answer 1

With a regular requirement, I use it in the tsx file:

 const logo = require('../assets/logo.png'); ... <img alt='logo' style={{ width: 100 }} src={String(logo)} /> 

Hope this helps. import ing didn't work for me either.

Answer 2

This is how I work it:

 // This declaration can be move in some common .d.ts file, will prevent tslint from throwing error declare function require(path: string); const SampleComponent = () => ( <div> <img src={require('./styles/images/deadline.png')} alt="Test" /> </div> ); 

The method that you suggested in your answer will end up writing a module declaration for each image file placed in the components.

Answer 3

In addition to mcku's answer, you can also use import as follows:

 // @ts-ignore import * as kittenHeader from '../images/kitten-header.jpg'; ... <img alt='logo' style={{ width: 100 }} src={logo} /> 

Although you should ignore the warning.

Answer 4

Error TS2307: Cannot find module '../images/kitten-header.jpg' , emphasizes that the TypeScript compiler does not understand the import of a .jpg file.

The webpack configuration is beautiful, as evidenced by the file copied to the dist folder successfully, despite a compilation error.

There are two ways to solve the problem.

First , we could get around TypeScript imports with the require statement. To do this, import ...

 import kittenHeader from '../images/kitten-header.jpg'; 

... can be replaced by a requirement ...

 const kittenHeader = require('../images/kitten-header.jpg'); 

... and that should be all that is needed.

Note that in my case, I also needed to install some typifications to support the require statement. Without them, I got error TS2304: Cannot find name 'require' .

I originally used @types/node as described in this SO answer , but @EvanSebastian noted that node is designed to support writing NodeJS modules, which is not what I am doing (see comments for the question).

I tried @types/webpack-env as suggested, but this led to error TS2322: Type '{ src: {}; }' is not assignable to type 'HTMLProps<HTMLImageElement>'. TS2322: Type '{ src: {}; }' is not assignable to type 'HTMLProps<HTMLImageElement>'. regarding the src property of my image tag.

More recently, I switched to using @types/requirejs , which I hope is focused enough to not include the load of inappropriate additional types. It currently works:

 npm install @types/requirejs --save-dev 

Alternatively, we can save the import and provide a d.ts file with type information declaring the corresponding module. I could not determine exactly what this file would look like.