React：webpack 文件加载器无法正确加载

Question

我已将 webpack 配置为加载 jpg 文件，但我的应用程序无法加载图像并且无法找到它们。这是 webpack 配置：

const path = require("path");

module.exports = {
entry: [
    './app/app.jsx'
],


output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: "public/",
    filename: 'bundle.js'
},
resolve: {

    alias: {
        Main: path.resolve(__dirname, 'app/components/Main.jsx'),
        Weather: path.resolve(__dirname, 'app/components/Weather.jsx'),
        About: path.resolve(__dirname, 'app/components/About.jsx'),
        Example: path.resolve(__dirname, 'app/components/Example.jsx'),
        WeatherParent: path.resolve(__dirname, 'app/components/WeatherParent.jsx'),
        WeatherForm: path.resolve(__dirname, 'app/components/WeatherForm.jsx'),
        WeatherMessage: path.resolve(__dirname, 'app/components/WeatherMessage.jsx'),
        openWeatherMap: path.resolve(__dirname, 'app/api/openWeatherMap.jsx'),


    },
    extensions: ['.js', '.jsx']
},
module: {
    rules: [
        {
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            test: /\.jsx$/,
            exclude: /(node_modules)/,
        },
        {
            use: {
                loader: 'file-loader',
                options: {
                    name:'[name].[ext]',


                }
            },
            test: /\.(jpg|png)$/
        }
    ],

    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader"}
    ]
},
devtool: "cheap-module-eval-source-map"
};

这是我的主要应用程序文件，它包含两条通往天气和关于页面的路线以及两个用于导航的导航链接：

import ReactDOM from 'react-dom'
import React from 'react'
import {BrowserRouter as Router, NavLink, Route, Switch} from 
'react-router-dom'
import Weather from "Weather";
import About from "About";
import "style-loader!css-loader!../app/Styles/appStyle.css";


ReactDOM.render(
   <Router>
      <div>
        <div className="topNav">
            <ul>
                <li><NavLink to="/" activeClassName="active">About</NavLink>
                </li>
                <li><NavLink to="/weather" 
                            activeClassName="active">Weather</NavLink></li>
            </ul>
        </div>

        <Switch>
            <Route path="/" component={About} exact={true}/>
            <Route path="/weather" component={Weather}/>
        </Switch>
    </div>
</Router>
,document.getElementById('app'));

这是我想加载图像的地方，但它没有显示，图像的实际地址在浏览器中似乎是正确的，我不知道 webpack 配置文件中的问题是什么 webpack emits file正确但浏览器不会显示图像：

import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import WeatherParent from 'WeatherParent';
import Example from 'Example';
import "style-loader!css-loader!../Styles/appStyle.css";
let weatherIcon = require('../img/weatherIcon.jpg');



export default class Weather extends Component {
   render() {
       return (
         <div>
            <div>
                <ul>
                    <li>
                        <Link
                            to={`${this.props.match.url}/weather`}
                            className="active"><img
                            enter code heresrc={weatherIcon}/>
                        </Link>
                    </li>
                    <li><Link to={`${this.props.match.url}/example`} 
             className="active">Example</Link></li>
                </ul>

            </div>
            <div>
                <Route path={`${this.props.match.url}/weather`} 
                  component={WeatherParent}/>
                <Route path={`${this.props.match.url}/example`} 
                  component={Example}/>
            </div>
        </div>
    )
 }
}

Answer 1

看起来您正在尝试 'require' .jpg 文件..您应该只使用字符串。

let weatherIcon = '../img/weatherIcon.jpg';

此外，尝试在您的 webpack 配置中将 file-loader 替换为 url-loader。

React：webpack 文件加载器无法正确加载

React: webpack file loader doesn't loads correctly

javascript

reactjs

webpack

webpack-file-loader