[英]React: webpack file loader doesn't loads correctly
I have configured webpack to load jpg files but yet it my app doesn't load image and couldn't find them. 我已经将webpack配置为加载jpg文件,但我的应用程序未加载图像并且找不到它们。 here is webpack config: 这是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"
};
and this is my main app file it consist of two routes to weather and about pages and two nav links for navigation: 这是我的主要应用程序文件,它由两条通往天气和路线的路线以及关于导航的两个导航链接组成:
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'));
and this is where i want to load the image but it doesn't show, the actual address of image seems to be correct in browser and i don't know what the problem is in webpack config file webpack emits file correctly but browser won't show the image: 这是我要加载图像但未显示的地方,图像的实际地址在浏览器中似乎是正确的,而且我不知道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>
)
}
}
Looks like you're trying to 'require' the .jpg file.. instead you should just be using a string. 看起来您正在尝试“要求” .jpg文件..相反,您应该只使用字符串。
let weatherIcon = '../img/weatherIcon.jpg';
Also, try replacing file-loader
with url-loader
in your webpack config. 另外,请尝试在您的webpack配置中用url-loader
替换file-loader
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.