cannot import image with create-react-app

Question

I'm using create-react-app, and I am struggling to load images. I am following the instructions as specified here, but I keep seeing the following error:

Failed to compile.  Error in ./src/components/Home/imageIndex.ts (1,24): error TS2307: Cannot find module './party.png' 

Does anyone know why when I run yarn start my app continues to fail to compile?

I have a Home component and this is how I am importing the file:

import photo from './party.png'; 

The component is located in src/components/Home/index.tsx and the png file is located in src/components/Home/party.png.

here is my package.json:

{   "name": "eai-reactjs-typescript-redux-starter",   "description": "A ReactJS/TypeScript + Redux starter template with a detailed README describing how to use these technologies together and constructive code comments.",   "version": "0.1.0",   "private": true,   "dependencies": {     "react": "^15.6.1",     "react-dom": "^15.6.1",     "react-redux": "^5.0.5",     "redux": "^3.7.0",     "redux-logger": "^3.0.6"   },   "devDependencies": {     "@types/enzyme": "^2.8.0",     "@types/jest": "^19.2.3",     "@types/node": "^7.0.18",     "@types/react": "^15.0.24",     "@types/react-dom": "^15.5.0",     "@types/react-redux": "^4.4.40",     "@types/redux-logger": "^3.0.0",     "enzyme": "^2.8.2",     "react-addons-test-utils": "^15.5.1",     "react-scripts-ts": "1.4.0",     "redux-devtools-extension": "^2.13.2"   },   "scripts": {     "start": "react-scripts-ts start",     "build": "react-scripts-ts build",     "test": "react-scripts-ts test --env=jsdom",     "eject": "react-scripts-ts eject"   } } 

Answer 1

Are you sure you've got the correct path? Also when you import an image via css (as is done in the example you mentioned) you need to give a path relative to the public folder and not the src folder. I have run into this problem several times.

An example using import:

import Image from './img.png' ... // react example ... render() {     return (         <img src={Image}/> // notice the curly ... 

and not

<img src="Image"/> 

Answer 2

I had the same problem and was able to solve with a require statement.

const photo = require('./party.png');

and then in your component use that like:

render() {     return (         <img src={photo}/> 

also see this post Displaying a static image using React, Typescript and Webpack