反应：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正确发射文件，但浏览器不会显示图像：

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

看起来你想要'需要'.jpg文件。相反，你应该只是使用一个字符串。

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

另外，尽量在你的WebPack配置与url-loader更换file-loader。