cannot import image with create-react-app
Solution 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"/>
Solution 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
Solution 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
Solution 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');
Solution 5
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]',
},
Related videos on Youtube
Comments
-
robskrob almost 4 years
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 insrc/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" } }
-
ylastapis over 5 yearsAs 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