web-dev-qa-db-ja.com

create-react-appでイメージをインポートできません

create-react-appを使用していますが、画像の読み込みに苦労しています。 here に指定されている手順に従いますが、次のエラーが引き続き表示されます。

Failed to compile.

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

yarn startを実行したときにアプリがコンパイルに失敗し続ける理由を誰もが知っていますか？

Homeコンポーネントがあり、これがファイルのインポート方法です。

import photo from './party.png';

コンポーネントはsrc/components/Home/index.tsxにあり、pngファイルはsrc/components/Home/party.pngにあります。

ここに私の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

正しいパスを持っていると確信していますか？また、cssを介してイメージをインポートする場合（前述の例で行われているように）、srcフォルダーではなく、パブリックフォルダーへの相対パスを指定する必要があります。私はこの問題に何度か遭遇しました。

インポートを使用した例：

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

ではなく

<img src="Image"/>
25
archae0pteryx

私は同じ問題を抱えており、requireステートメントで解決することができました。

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

そして、コンポーネントで次のようなものを使用します：

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

この投稿も参照してください React、TypeScript、およびWebpackを使用した静的画像の表示

11
melmquist

@ archae0pteryxが提案したように、コードから写真を分離する方がはるかに優れているため、srcの代わりにプロジェクトpublicフォルダーを使用する必要があります。

cssでの動作は次のとおりです。

  1. 「img.bmp」を/ publicにコピーします
  2. .cssファイル/クラス内：background-image: url('/img.bmp');
1
krankuba

デフォルトでは、Create-React-Appはサイズが10000バイトのファイルにurl-loaderを使用します

開発環境では問題なく動作しますが、本番環境ではエラーを減らします。

実稼働環境では、webpackが代わりにファイルローダーを使用するように、バイト制限の値を変更する必要があります。

アプリをイジェクトする必要がある場合は、webpack.config.prod.jsファイルを変更し、url-loaderの制限を10に変更してください。

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