javascript - react 应用程序无法读取 Assets 文件夹的正确路径 - 本地镜像未显示在本地主机上，仅显示图像图标

Question

我的目录如下所示:

-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

现在，我的 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: {} }],
      },
    ],
  },
};

还有我的 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>
    );
  }
}

*如果我使用浏览器中的图像地址，它工作正常，但我尝试使用本地镜像并且不显示任何内容。我还尝试将图像移动到公共(public)文件夹中，并尝试使用 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)

希望有人能帮助我!

Answer 1

您可以尝试:将 Assets 文件夹移动到公共(public)文件夹中。然后从 img 标签引用图像，例如:src=''。/assets/image1.png''我希望它能工作