kann Bild mit create-react-app nicht importieren

Question

Ich verwende create-react-app, und ich habe Probleme, Bilder zu laden. Ich folge den Anweisungen, wie angegeben here, aber ich sehe immer wieder folgende Fehlermeldung:

Failed to compile. 

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

Weiß jemand, warum, wenn ich yarn start meine app läuft weiter zu kompilieren zum Scheitern verurteilt?

Ich habe eine Home Komponente und das ist, wie ich die Datei bin importieren:

import photo from './party.png'; 

Die Komponente befindet sich in src/components/Home/index.tsx und die PNG-Datei wird in src/components/Home/party.png entfernt.

hier ist mein 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

Sind Sie sicher, dass Sie den richtigen Pfad haben? Auch wenn Sie ein Bild über CSS importieren (wie in dem Beispiel, das Sie erwähnt haben), müssen Sie einen Pfad relativ zum öffentlichen Ordner und nicht zum src-Ordner angeben. Ich bin mehrmals auf dieses Problem gestoßen.

Ein Beispiel unter Verwendung von Import:

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

und nicht

<img src="Image"/> 

Answer 2

Ich hatte das gleiche Problem und konnte mit einer Erklärung bedarf lösen.

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

und dann in Ihrer Komponente verwenden, die wie:

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

siehe auch Beitrag Displaying a static image using React, Typescript and Webpack