无法使用webpack dev服务器中间件加载图像

所以我花了24小时来调整我的代码，试图让这个工作和searchSO和谷歌，但没有运气 – 也许有人可以帮助！

我的React应用程序在Express上运行，但是使用webpack-dev-server中间件。 当我加载页面时，图像是空白的，就好像它们不存在一样。 我没有得到任何错误信息在我的控制台（例如没有404错误），但图像元素只是显示alt文本，并没有显示实际应该在那里的png或svg 。

顺便说一句，这不仅仅是反应组件不能渲染图像 – 我试图将一个图像文件硬编码到我的index.html文件中作为测​​试，这产生了相同的结果。

这是我的代码：

server.js（截断以排除数据库设置和额外的快速路由）

 const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const path = require('path'); const mongoose = require('mongoose'); const config = require('./webpack.dev.config'); // SERVER SETUP const app = express(); const router = express.Router(); var publicPath = path.resolve(__dirname, 'public'); compiler=webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, stats: {colors: true} })); app.use(webpackHotMiddleware(compiler, { log: console.log })); //Routes // ...additional routes app.get('*', function(req, res){ res.sendFile(path.resolve(publicPath, 'index.html')); }) app.use(express.static(publicPath)); app.listen(3000, function(){ console.log('Server running on port 3000'); }); 

webpack.dev.config.js

 var webpack = require('webpack'); var path = require('path'); var nodeModulesPath = path.resolve(__dirname, 'node_modules'); var buildPath = path.resolve(__dirname, 'public', 'build'); var mainPath = path.resolve(__dirname, 'app', 'main.js'); var config = { devtool: 'eval-source-map', devServer: { historyApiFallback: true }, entry: [ 'webpack/hot/dev-server', 'webpack-hot-middleware/client', 'whatwg-fetch', //Our application mainPath ], output: { path: '/', publicPath: 'http://localhost:3000/build/', assetsPublicPath: 'http://localhost:3000/', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js?$/, loader: 'babel', exclude: nodeModulesPath }, { test: /\.css$/, loader: 'style!css?modules!postcss' }, { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader' } ] }, postcss: [ require('autoprefixer'), require('precss') ], plugins: [ new webpack.HotModuleReplacementPlugin() ], target: 'web' }; module.exports = config; 

下面是一个应该访问图像的React组件示例：

 import React, {Component, PropTypes} from 'react'; import TopMenu from "./TopMenu"; import styles from '../cssPartials/TopBar.css'; const logo = './images/svg/xenonLogo.svg'; const TopBar = () => { return ( <div className={styles.topBar}> <div className={styles.logoHolder}> <img src={logo} alt="Xenon Logo" /> </div> <TopMenu /> </div> ) } export default TopBar 

这是应用程序的文件结构：

 root |-app |-admin |-components //React components |-users |-components //React components |-data //contains database and redux files |-node_modules |-public //This is the public folder specified in server.js and webpack.dev.config.js |-images |-svg //contains the svg files |-index.html |-bundle.js |-.babelrc // babel config file |-nodemon.json //nodemon config file |-package.json |-server.js |-webpack.dev.config.js 

我认为这是一切，但让我知道是否有任何更多的代码需要。 感谢大家！

Answer 1

有几件事你必须检查你的webpackconfiguration。

首先 – 确保你已经安装了url-loader ， file-loader npm包

尝试改变你的输出configuration到这一个 –

  output: { path: path.join(__dirname, 'public'), publicPath: 'http://localhost:8080/public/', filename: 'bundle.js' } 

和加载器的图像

  { test: /\.(jpe?g|png|gif|svg)$/i, include : path.join(__dirname, 'images'), loader : 'url-loader?limit=30000&name=images/[name].[ext]' }, // inline base64 URLs for <=30k images, direct URLs for the rest 

另外在你的反应组件中，你需要导入SVG文件。

 import React, {Component, PropTypes} from 'react'; import TopMenu from "./TopMenu"; import styles from '../cssPartials/TopBar.css'; import logo from './images/svg/xenonLogo.svg'; const TopBar = () => { return ( <div className={styles.topBar}> <div className={styles.logoHolder}> <img src={logo} alt="Xenon Logo" /> </div> <TopMenu /> </div> ) }