所以我花了过去24小时来调整我的代码并尝试让它工作,搜遍了SO和Google,但没有运气 - 或许有人可以帮忙!我的React应用程序正在Express上运行,但使用webpack-dev-server中间件。当我加载页面时,图片显示为空白,就好像它们不存在一样。我在控制台中没有收到任何错误消息(例如没有404错误),但图像元素只显示“alt”文本,而不是应该存在的实际“png”或“svg”。顺便说一句,不仅是React组件无法呈现图像 - 我尝试将一个图像文件硬编码到我的index.html文件中进行测试,结果也是一样的。以下是我的代码:server.js(截断以排除数据库设置和其他express路由)
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
我觉得这就是全部了,如果需要更多的代码,请告诉我。谢谢大家!
file-loader
和import
语法对我很有效。 - JJJpublicPath
解决了这个问题。 - tomtomssi