我很反应和webpack,我得到这个奇怪的问题,我不明白。
问题:
当我检查图像时,上面是我看到的,显然不显示我的图像。我正在使用文件加载器。
我的结构:
的WebPack:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["env"], plugins: ["transform-class-properties"] },
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ["eslint-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
publicPath: bundlePath,
filename: "bundle.js",
},
devServer: {
contentBase: path.join(__dirname, "public"),
port: 8080,
publicPath: "http://localhost:8080/dist",
historyApiFallback: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
我错过了什么?
编辑:
像这样导入图像:
import headerImage from "../../../../public/images/MyImage.jpg"
渲染如下:
class Header extends Component {
linkClick = event => {
if (this.props.properties.movment.position.x > 0) event.preventDefault();
};
render() {
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
<Image src={headerImage}/>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<HeaderLinks linkClicked={this.linkClick} />
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
var requireImages = require.context('../public/images', true, /\.(jpg|png|gif|svg)$/);
您可以在index.js文件中插入上述代码,以直接从应用程序的任何位置引用您的图像。
您也可以继续在Header文件中使用<Image src="./public/images/MyImage.jpg" />
,而无需单独导入每个图像。
编辑:请检查路径并确保它指向dist> public> images文件夹中的图像
这需要一些时间,但似乎我需要增加字节限制才能使其工作。
我还通过链接更改了@OlivierBoissé建议的webpack配置
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader?name=/public/images/[name].[ext]",
options: {
limit: 100000,
},
以及以下内容:
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
filename: "bundle.js",
},