如何使用webpack +渲染图像? [英] How to render images with webpack + react?
本文介绍了如何使用webpack +渲染图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是新手反应和webpack,我得到这个奇怪的问题,我不明白。
I am fairly new to react and webpack and I am getting this weird problem which I dont understand.
问题:
当我检查图像时,上面是我看到的,显然不显示我的图像。我正在使用文件加载器。
When I inspect the image the above is what i see which obviously does not show my image. I am usuing file loader.
我的结构:
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>
);
}
}
推荐答案
这花了一些时间但似乎我需要增加字节限制才能使其工作。
This took some time but It would seem that I needed to increase the byte limit to get this to work.
我还通过@OlivierBoissé通过链接将webpack confic更改为建议者
I also changed the webpack confic to as suggester by @Olivier Boissé via the link
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",
},
这篇关于如何使用webpack +渲染图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文