Reactはローカル画像をロードしません

小さな反応アプリを作成していますが、ローカル画像が読み込まれません。placehold.it/200x200ロードのような画像。サーバーの問題かもしれませんか？

これが私のApp.jsです

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

およびserver.js：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

Webpackを使用する場合は、Webpackがrequire画像を処理するために画像を作成する必要があります。これにより、内部画像が読み込まれないのに外部画像が読み込まれる理由が説明されるため、代わりにimage-name.pngをそれぞれの正しい画像名に置き換える<img src={"/images/resto.png"} />必要が<img src={require('/images/image-name.png')} />あります。これにより、Webpackはソースimgを処理して置き換えることができます。

create-react- appを使用してアプリの構築を開始しました（「新しいアプリの作成」タブを参照）。付属のREADME.mdに次の例があります。

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

これは完璧に機能しました。ここだそのREADMEのマスタードキュメントへのリンクを説明し、（抜粋）は：

... JavaScriptモジュールにファイルを直接インポートできます。これは、Webpackにそのファイルをバンドルに含めるように指示します。CSSインポートとは異なり、ファイルをインポートすると文字列値が得られます。この値は、コードで参照できる最後のパスです。たとえば、画像のsrc属性やPDFへのリンクのhrefなどです。

サーバーへのリクエスト数を減らすために、10,000バイト未満の画像をインポートすると、パスではなくデータURIが返されます。これは、次のファイル拡張子に適用されます：bmp、gif、jpg、jpeg、png ...

別の方法：

まず、これらのモジュールをインストールします：url-loader、file-loader

npmの使用： npm install --save-dev url-loader file-loader

次に、これをWebpack構成に追加します。

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit：データURLとしてのインラインファイルのバイト制限

両方のモジュールをインストールする必要があります：url-loaderとfile-loader

最後に、次のことができます。

<img src={require('./my-path/images/my-image.png')}/>

これらのローダーは、ここでさらに調査できます。

url-loader：https : //www.npmjs.com/package/url-loader

ファイルローダー：https : //www.npmjs.com/package/file-loader

実際にコメントしたいのですが、まだ承認されていません。それがそうではないのにそれが次の答えであるふりをする理由です。

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

その道を続けていきたいと思います。簡単に挿入できる画像がある場合、それはスムーズに機能します。私の場合は少し複雑です。いくつかの画像をマッピングする必要があります。これまでのところ、私が見つけたこれを実行できる唯一の方法は次のとおりです

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

だから、私の質問は、これらの画像を処理する簡単な方法があるかどうかです。言うまでもなく、より一般的なケースでは、文字どおりにインポートする必要があるファイルの数が膨大になり、オブジェクト内のキーの数も増える可能性があります。（そのコードのオブジェクトは、名前で参照するために明確に含まれています-そのキー）私の場合、requireに関連する手順は機能していません。とそれ自体はどちらも機能していません。

私は上記の受け入れられた答えを強化する以下を残したかっただけです。

受け入れられた答えに加えて、aliasWebpackでパスを指定することにより、自分の生活を少し簡単にすることができます。そのため、現在のファイルに対して画像がどこにあるかを心配する必要はありません。以下の例を参照してください：

Webpackファイル：

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

使用する：

<img src={require("public/img/resto.ong")} />

私も@Hawkeye Parkerおよび@Kiszuriwaliliboriからの回答に追加したいと思います。

ここのドキュメントで述べたように、通常は必要に応じて画像をインポートするのが最善です。

ただし、以下のドキュメントの推奨事項により、多くのファイルを動的に読み込む必要があり、画像をパブリックフォルダー（READMEにも記載）に置く必要がありました。

通常、JavaScriptからスタイルシート、画像、フォントをインポートすることをお勧めします。パブリックフォルダーは、あまり一般的でないいくつかのケースの回避策として役立ちます。

• manifest.webmanifestなど、ビルド出力に特定の名前のファイルが必要です。
• 何千もの画像があり、それらのパスを動的に参照する必要があります。
• バンドルされたコードの外に、pace.jsのような小さなスクリプトを含めたいとします。
• 一部のライブラリはWebpackと互換性がない可能性があり、それをタグとして含める以外に選択肢はありません。

それが他の誰かを助けることを願っています！クリアする必要がある場合は、コメントを残してください。

私はSSRを使用するプロジェクトを開発しており、ここでいくつかの回答に基づいて私のソリューションを共有したいと思います。

私の目標は、インターネット接続がオフラインのときに画像をプリロードして表示することです。（それはベストプラクティスではないかもしれませんが、私にとってはうまくいくので、今のところ問題ありません）参考までに、このプロジェクトではReactHooksも使用しています。

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

画像を使用するために、私はこのように書きます

<img src="/assets/images/error-review-failed.jpg" />

server.jsのコードを-に変更してみてください

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

時々あなたはあなたの画像の場所/ソースの代わりに入力するかもしれません：試してください

./assets/images/picture.jpg

の代わりに

../assets/images/picture.jpg

src={"/images/resto.png"}

この方法でsrc属性を使用すると、画像はサイトの絶対パス "/images/resto.png"から読み込まれます。画像ディレクトリは、サイトのルートに配置する必要があります。例：http : //www.example.com/images/resto.png

ここに私のために働いたものがあります。まず、問題を理解しましょう。変数を引数として使用して要求することはできません。Webpackは、コンパイル時にバンドルするファイルを知る必要があります。

エラーが発生したとき、絶対と相対のようにパスの問題に関連している可能性があると思いました。だから私は以下のように要求するためにハードコードされた値を渡しました：<img src = {require（ "../ assets / images / photosnap.svg"）} alt = "" />。うまくいきました。しかし、私の場合、値は小道具からの変数です。いくつかの提案に従って、文字列リテラル変数を渡そうとしました。うまく行かなかった。また、10個すべての値に対してスイッチケースを使用してローカルメソッドを定義しようとしました（それが最善の解決策ではないことはわかっていましたが、どういうわけか機能したかっただけです）。それもうまくいきませんでした。その後、変数をrequireに渡すことができないことを知りました。

回避策として、data.jsonファイルのデータを変更して、イメージの名前のみに限定しました。小道具から文字列リテラルとして取得されるこの画像名。私はそれを次のようにハードコードされた値に連結しました：

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

ロゴに含まれる実際の値はdata.jsonファイルから取得され、photosnap.svgなどの画像名を参照します。

反応でローカル画像をロードする最良の方法は次のとおりです

たとえば、以下に示すように、すべての画像（またはビデオ、フォントなどのアセット）をパブリックフォルダーに保存します。

書くだけ<img src='/assets/images/Call.svg' />で、reactコンポーネントのいずれかからCall.svg画像にアクセスできます。

注：アセットをパブリックフォルダーに保存すると、「/ path_to_image」を指定するだけでプロジェクトのどこからでもアクセスできるようになり、このようにパストラバーサル「../../」を実行する必要はありません。

最初に画像をインポートしてから使用する必要があります。それは私のために働いた。

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}