を使用してReactをインストールしましたcreate-react-app。正常にインストールされましたが、コンポーネント（Header.js、ファイルパス：）の1つにイメージをロードしようとしていますが、ロードしてsrc/components/common/Header.jsいません。これが私のコードです：
import React from 'react';
export default () => {
var logo1 = (
<img
//src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
src={'/src/images/logo.png'}
alt="Canvas Logo"
/>
);
return (
<div id="header-wrap">
<div className="container clearfix">
<div id="primary-menu-trigger">
<i className="icon-reorder"></i>
</div>
<div id="logo">
<a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
<a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
<img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
</a>
</div>
</div>
</div>
);
}
私のように画像のパスを記述する場合src={require('./src/images/logo.png')}、私の中logo1の変数は、エラーを与えます：
コンパイルに失敗しました。
./src/Components/common/Header.jsのエラー
モジュールが見つかりません：/ var / www / html / wistful / src / Components / commonの./src/images/logo.png
これを解決するのを手伝ってください。ここで私が間違っていることを教えてください。
作成について質問がある場合はReact App、ユーザーガイドを読むことをお勧めします。
これは、あなたが持つかもしれないこの質問や他の多くの質問に答えます。
特に、ローカルイメージを含めるには、2つのオプションがあります。
// Assuming logo.png is in the same folder as JS file
import logo from './logo.png';
// ...later
<img src={logo} alt="logo" />
すべてのアセットはビルドシステムによって処理され、本番ビルドではハッシュ付きのファイル名を取得するため、このアプローチは優れています。ファイルが移動または削除された場合にもエラーが発生します。
欠点は、何百もの画像がある場合、任意のインポートパスを使用できないため、面倒になる可能性があることです。
// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
このアプローチは一般的にはお勧めできませんが、何百もの画像があり、それらを1つずつインポートするのが面倒である場合に最適です。欠点は、キャッシュの無効化について考え、移動または削除されたファイルを自分で監視する必要があることです。
お役に立てれば！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加