Reactで任意のパスにあるイメージ画像の画面表示ができない。

Question

次の環境でテストをしています。
OS : Windows10
React : 4.0.3

次の処理をしました。

1. Reactのアプリは、次のコマンドで作成しました。

F:
cd　\react
npx create-react-app img_randam
2. パス「F:\react\img_randam\src\assert」を作成し、そのパスにファイル「Google.jpg」を作成しました。
3. ファイル「F:\react\img_randam\src\App.js」を次のように修正しました。

import React from 'react';

class App extends React.Component {
  render() {
	return <img src={require('./assert/Google.jpg')} alt="Logo"
			height="400px" width= "600px" />;
  }
}

export default App;

4.次のコマンドを実行しました。
cd F:\react\img_randam
npm run start

1. WEB画面には、ファイル「Google.jpg」の画像でなく、次の画像が表示されました。

Reactのバージョン4.0.1で同じ処理をした時には、次の画面が表示されました。
（ファイル「Google.jpg」の画像が表示されています）

皆さんにお聞きいたしますが、

1. Reactのバージョン4.0.3では、なぜ画像が表示されないのでしょうか？
2. 画像を表示する方法があれば教えてください。

Comments

[hoshi-takanori]

4.0.1 とか 4.0.3 というのは、React アプリの雛形を作るコマンド create-react-app のバージョンですね。
React そのもののバージョンは 16 とか 17 とかのはずです。package.json をご確認ください。

[Osat.Kaso]

package.jsonは、次の通りとなっています。
--
{
"name": "img_randam",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
--

Answer 1

hosi-takanoriさん、回答をありがとうございました。
あなたが示した方法で、画像表示が成功しました。

尚、require文を使用する方法も、次のHPを参照することでわかりました。
(https://stackoverflow.com/questions/65951374/fail-to-require-image-when-using-react-17-version)
次のソースファイルです。

import React from 'react';

class App extends React.Component {
  render() {
	let src = require('./asset/Google.jpg');

	return <img src={src.default} alt="Logo" height="300px" width= "450px" />;
  }
}

export default App;

Answer 2

画像の読み込みも require ではなく import を使うと良いでしょう。
参考: React.JS (Webpack)の画像ファイルのimportについて - sgryjp.log

import React from 'react';
import Google from './asset/Google.jpg';

class App extends React.Component {
  render() {
    return <img src={Google} alt="Logo"
            height="400px" width= "600px" />;
  }
}

export default App;

あと、assert は条件が成り立つことを確認する処理 (主にテストコードで使う) で、画像などの素材は asset ですね。