- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
所以在过去的 24 小时里,我一直在调整我的代码并试图让它工作并搜索 SO 和 Google,但没有运气 - 也许有人可以提供帮助!
我的 React 应用程序在 Express 上运行,但使用 webpack-dev-server 中间件。当我加载页面时,图像变成空白,就好像它们不存在一样。我的控制台中没有收到任何错误消息(例如,没有 404 错误),但图像元素仅显示 alt
文本而不显示实际的 png
或 svg
应该在那里。
顺便说一下,不仅仅是 React 组件无法渲染图像 - 我尝试将图像文件硬编码到我的 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>
)
}
关于node.js - 无法使用 webpack 开发服务器中间件加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39787138/
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书,但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我,缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始? (中间纵横) 最佳答案 有几种方法可以做到这一点,如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作,你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作? 最佳答案 td 元素上的 height 等同于 min-height,因为如果需要,表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div,其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性,以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格,只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案,并且在每个教程中我都发现了某种中间表的用法,如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色,但为什么要
我正在寻找以下解决方案。我想定位一个图像元素,例如 在中间。所以高度是视口(viewport)的高度,宽度会自动设置,图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局,它更像是注册用户的个人仪表板。我让它变得简单,使用基本的 2 列网格,一个用于侧边栏,一个用于主要内容。 因为,例如,80% 的网站使用将发生在一个单独的子系统中,在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码,所以它有一个把单词放在左边、中间或右边,但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站,但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书,然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链,但出于某种原因,当我在我的计算机上安装我的根 CA 并尝试验证证书链时,它总是告诉我它找不到证书的颁发者.为了让事情发生,我必须安装中间 CA,这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个,而是完全认同这个想法。但是,我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点? 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本,在文本中间加一条白线,如下图所示。是否可以使用 css 来实现?这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中,字母有大写和小写形式。在 Python 中,如果你想比较两个字符串而不考虑它们的大小写,你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀!