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"
  }
}

rimraf · Accepted Answer · 2017-06-17 20:37:17Z

34

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"/>

answered Jun 17, 2017 at 20:37

rimraf

4,1577 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ylastapis Over a year ago

As he is using typescript, he must also exclude his .png to be defined, as mentionned by pscanf here github.com/wmonk/create-react-app-typescript/issues/172

Hyeonseo Kim · Accepted Answer · 2020-07-14 05:50:30Z

16

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

edited Jul 14, 2020 at 5:50

Hyeonseo Kim

3444 silver badges15 bronze badges

answered Jun 17, 2017 at 21:22

melmquist

4801 gold badge4 silver badges12 bronze badges

Comments

devnull · Accepted Answer · 2018-08-15 16:27:58Z

4

As @archae0pteryx proposed it is much better to separate pictures from the code, so the project public folder should be used instead of src.

Here is how it works with css:

copy 'img.bmp' into /public
inside .css file/class: background-image: url('/img.bmp');

answered Aug 15, 2018 at 16:27

devnull

1,3731 gold badge17 silver badges20 bronze badges

Comments

Vaibhav Vishal · Accepted Answer · 2019-11-25 20:55:28Z

3

You can simply use something like this:

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Quoted directly from CRA docs

answered Nov 25, 2019 at 20:55

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

Comments

Rarblack · Accepted Answer · 2018-10-15 19:50:04Z

1

By default, Create-React-App uses url-loader for files with size 10000 bytes

that works fine in the development environment, but in production reduce error.

For a production environment, you should change the value for the limit of bytes in order to enforce webpack use file-loader instead.

If you have to eject your app modify webpack.config.prod.js file and change the limit of url-loader to 10 and will work as well

{
 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
 loader: require.resolve('url-loader'),
 options: {
 limit: 10,
 name: 'static/media/[name].[hash:8].[ext]',
},

edited Oct 15, 2018 at 19:50

Rarblack

4,6744 gold badges24 silver badges36 bronze badges

answered Oct 15, 2018 at 18:12

xargr

3,1341 gold badge22 silver badges29 bronze badges

Comments

Primoshenko · Accepted Answer · 2024-02-09 18:55:55Z

0

I had the same issue. My solution was to place the image into the Public folder. After that, I was able to read the image using:

<img src="/pictureName.png" alt="Description" />

answered Feb 9, 2024 at 18:55

Primoshenko

1401 silver badge10 bronze badges

Collectives™ on Stack Overflow

cannot import image with create-react-app

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related