反应应用程序未读取资产文件夹的正确路径-本地图像未显示在本地主机上，仅显示图像图标答案

【问题标题】：react app doesn't read correct path for assets folder - local images don't show up on localhost, only shows an image icon反应应用程序未读取资产文件夹的正确路径-本地图像未显示在本地主机上，仅显示图像图标
【发布时间】：2020-06-13 01:44:07
【问题描述】：

我的目录如下所示：

-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>
    );
  }
}

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

希望有人可以帮助我！

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

您可以尝试：将资产文件夹移动到公用文件夹中。然后从 img 标签引用图像，如：src=''。 /assets/image1.png'' 我希望它有效

【讨论】：

【解决方案2】：

为什么要导入图像？尝试在您的元素中将其用作 url ：

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

将资产文件夹移动到公共文件夹，这应该可以工作

【讨论】：