webentwicklung-frage-antwort-db.com.de

bild kann nicht mit der Create-React-App importiert werden

Ich verwende create-react-app, und ich habe Schwierigkeiten, Bilder zu laden. Ich befolge die Anweisungen wie angegeben here , sehe jedoch den folgenden Fehler:

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 starte, meine App weiterhin kompiliert wird?

Ich habe eine Home-Komponente, und so importiere ich die Datei:

import photo from './party.png';

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

hier ist meine 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"
  }
}
16
robskrob

Bist du sicher, dass du den richtigen Pfad hast? Wenn Sie ein Bild über css importieren (wie im oben genannten Beispiel beschrieben), müssen Sie einen Pfad relativ zum öffentlichen Ordner und nicht zum Ordner src angeben. Ich bin mehrmals auf dieses Problem gestoßen. 

Ein Beispiel mit Import:

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

und nicht

<img src="Image"/>
24
archae0pteryx

Ich hatte das gleiche Problem und konnte es mit einer Requirement-Anweisung lösen.

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

und dann in Ihrer Komponente verwenden Sie das wie:

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

siehe auch diesen Beitrag Anzeigen eines statischen Bildes mit React, TypeScript und Webpack

11
melmquist

Da @ archae0pteryx vorschlug, ist es viel besser, Bilder vom Code zu trennen, daher sollte der Ordner Projekt public anstelle von src verwendet werden.

Und so funktioniert es mit css :

  1. kopieren Sie "img.bmp" in/public
  2. in der .css-Datei/Klasse: background-image: url('/img.bmp');
1
krankuba

Standardmäßig verwendet Create-React-Appurl-loader für Dateien mit einer Größe von 10000 Byte

das funktioniert gut in der Entwicklungsumgebung, reduziert aber Fehler in der Produktion.

In einer Produktionsumgebung sollten Sie den Wert für das Byte-Limit ändern, um die Verwendung des FileLoader durch das Webpack zu erzwingen.

Wenn Sie Ihre App auswerfen müssen, ändern Sie die webpack.config.prod.js-Datei und ändern Sie die Grenze von url-loader in 10

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