0

我已将 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 正确发出文件但浏览器不会' t 显示图像：

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

1 回答 1

0

看起来您正在尝试“要求” .jpg 文件。而不是您应该只使用字符串。

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

另外，尝试在你的 webpack 配置中替换file-loader为。url-loader

于 2017-08-28T17:23:56.627 回答