Menu
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" } } 
591
To import and use an image in a React component:Import the local image, e.g. import MyImage from './thumbnail. webp'; . Pass the imported image to the src prop on the img element. For example, <img src={MyImage} alt="horse" /> .
To import image in React, you need to do the following:Write import statement referencing the given image. Use imported image in the component render function.
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"/> 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
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
