无法使用 webpack 开发服务器中间件加载图像
Can't load images using webpack dev server middleware
所以我在过去的 24 小时里调整了我的代码并试图让它工作并搜索了 SO 和 Google,但没有运气 - 也许有人可以提供帮助!
我的 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
我想就这些了,但如果还需要更多代码,请告诉我。谢谢大家!
您必须在 webpack 配置中检查几件事。
首先 - 确保你已经安装了 url-loader, file-loader npm packages
尝试将您的输出配置更改为此 -
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
同样在你的react组件中,你需要导入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>
)
}
所以我在过去的 24 小时里调整了我的代码并试图让它工作并搜索了 SO 和 Google,但没有运气 - 也许有人可以提供帮助!
我的 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
我想就这些了,但如果还需要更多代码,请告诉我。谢谢大家!
您必须在 webpack 配置中检查几件事。
首先 - 确保你已经安装了 url-loader, file-loader npm packages
尝试将您的输出配置更改为此 -
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
同样在你的react组件中,你需要导入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>
)
}