web-dev-qa-db-fra.com

impossible d'importer une image avec create-react-app

J'utilise create-react-app et j'ai du mal à charger les images. Je suis les instructions comme spécifié ici , mais je continue à voir l'erreur suivante:

Failed to compile.

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

Quelqu'un sait-il pourquoi, lorsque j'exécute yarn start, la compilation de mon application échoue?

J'ai un composant Home et voici comment j'importe le fichier:

import photo from './party.png';

Le composant se trouve dans src/components/Home/index.tsx et le fichier png dans src/components/Home/party.png.

voici mon 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"
  }
}
reactjstypescriptwebpackcreate-react-app
16
robskrob

Êtes-vous sûr d'avoir le bon chemin? De même, lorsque vous importez une image via css (comme dans l'exemple que vous avez mentionné), vous devez donner un chemin relatif au dossier public et non au dossier src. J'ai rencontré ce problème plusieurs fois. 

Un exemple utilisant import:

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

et pas

<img src="Image"/>
24
archae0pteryx

Comme @ archae0pteryx a proposé de séparer les images du code, il est préférable d'utiliser le dossier public au lieu de src .

Voici comment cela fonctionne avec css :

  1. copier 'img.bmp' dans/public
  2. dans le fichier .css/class: background-image: url('/img.bmp');
1
krankuba

Par défaut, Create-React-App utilise url-loader pour les fichiers de taille 10000 octets.

cela fonctionne très bien dans l'environnement de développement, mais en production, réduit les erreurs.

Pour un environnement de production, vous devez modifier la valeur pour la limite d'octets afin d'appliquer Webpack à l'aide du chargeur de fichiers.

Si vous devez éjecter votre fichier de modification d'application webpack.config.prod.js et modifier la limite de url-loader en 10, elle fonctionnera également.

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