Javascript react应用程序不'；无法读取资产文件夹的正确路径-本地图像不'；不显示在本地主机上，仅显示图像图标

我的目录如下所示：

-PROJECT
   - app
     -assets
      -image1.png
      -image2.jpg
      -image3.png
     -components
     -reducers
   -node_modules (on .gitignore)
   -public
     -bundle.js
     -bundle.js.map
     -favicon.ico
     -index.html
     -style.css
   -server
   .babelrc
   .gitignore
   webpack.config.js

'use strict';

const { resolve } = require('path');

module.exports = {
  entry: ['babel-polyfill', './app/main'],
  output: {
    path: __dirname,
    filename: './public/bundle.js',
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{ loader: 'file-loader', options: {} }],
      },
    ],
  },
};

现在，我的webpack.config.js如下所示：

-PROJECT
   - app
     -assets
      -image1.png
      -image2.jpg
      -image3.png
     -components
     -reducers
   -node_modules (on .gitignore)
   -public
     -bundle.js
     -bundle.js.map
     -favicon.ico
     -index.html
     -style.css
   -server
   .babelrc
   .gitignore
   webpack.config.js

'use strict';

const { resolve } = require('path');

module.exports = {
  entry: ['babel-polyfill', './app/main'],
  output: {
    path: __dirname,
    filename: './public/bundle.js',
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{ loader: 'file-loader', options: {} }],
      },
    ],
  },
};

和my Home.js组件：

import React, { Component } from 'react';
import logo from '../assets/image2.jpg';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <h1>name</h1>
        <p>something</p>
        <img id="imgHome" src={logo} />
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“../assets/image2.jpg”导入徽标；
类Home扩展组件{
render（）{
返回(
名称
某物

);
}
}

*如果我使用浏览器中的图像地址，它可以正常工作，但我尝试使用本地图像，而不显示任何内容。我还尝试将图像移动到公用文件夹中，并尝试使用require（“”）语法。src={require（'../assets/image2.jpg'）}也不起作用。 *我还注意到路径已经被读取，因为当我运行服务器时，它显示了get.jpg

pYYj <—— 200 OK 1.79 MB application/javascript; charset=UTF-8 (<—> 145.5 ms)
UO13 ——> GET /aba2c31a13e0d6336220931199bf46c3.jpg 
UO13 <—— 200 OK 231 B text/html; charset=UTF-8 (<—> 1.7 ms)
HkSa ——> GET /favicon.ico 
HkSa <—— 200 OK 6.24 KB image/x-icon (<—> 1.6 ms)
6tQo ——> GET / 
6tQo <—— 304 Not Modified (<—> 1.7 ms)
fOce ——> GET /style.css 
fOce <—— 304 Not Modified (<—> 1.5 ms)
cWVD ——> GET /bundle.js 
cWVD <—— 304 Not Modified (<—> 2.2 ms)

pYYj-GET/aba2c31a13e0d636220931199bf46c3.jpg
UO13 GET/favicon.ico
香港会计师公会
6tQo GET/style.css
fOce-GET/bundle.js
cWVD为什么要导入图像？在元素中尝试将其用作url：

<img id="imgHome" src="assets/image2.jpg">



将assets文件夹移动到public文件夹，这样应该可以工作
为什么要导入图像？在元素中尝试将其用作url：

<img id="imgHome" src="assets/image2.jpg">



将资产文件夹移动到公用文件夹，这应该可以工作
您可以尝试的是：将资产文件夹移动到公用文件夹中。然后从img标记中引用如下图像：src=''/assets/image1.png''我希望它能工作
您可以尝试的是：将assets文件夹移动到公用文件夹中。然后从img标记中引用如下图像：src=''/assets/image1.png''我希望它能工作