Question

我想在使用webpack的React中使用图像。我尝试使用Ok(json);和Accept: application/json但都失败了。

目前，我的webpack.config.js位于下方 - 删除了其他加载程序设置：

url-loader

问题是在dist目录下没有生成任何文件。当然，下一个代码失败了：file-loader。

文件加载器版本是0.8.5。

module.exports = { entry: `${__dirname}/src/App.js`, output: { path: `${__dirname}/dist`, filename: 'bundle.js', }, module: { loaders: [ ... { test: /\.(png|jpg|jpeg|gif)$/, loader: 'file?name=images/[name].[ext]' }, ], }, resolve: { extensions: ['', '.js', '.jsx'], }, };

请告诉我如何在webpack中使用图片做出反应。

Answer 1

据我所知，有几种不同的方法可以在webpack中要求图像。

<强> 1。使用file-loader和html-loader，然后异步加载图片

文件加载器没有解析你的html标记，它只允许你需要特定类型的文件，那种文件将作为 __ WEBPACK_MODULE __ 。

假设你有html文件A，

<!-- htmlA -->
<img src='./image/whatever.png' />

您想要解析src属性并自动要求它。在你的js myJS.js，

var htmlA = require('../views/htmlA.html');
//render htmlA or bind the event, do whatever you want here.

您的webpack配置应设置为

//webpack.config.js
loaders: [
    {
      //IMAGE LOADER
      test: /\.(jpe?g|png|gif|svg)$/i,
      loader:'file'
    },
    {
      // HTML LOADER
      test: /\.html$/,
      loader: 'html-loader'
    }
]

这会将您的whatever.png打包到输出文件夹中。它将被定义为 WEBPACK_MODULE 并异步地要求它。 基于webpack.config中的publicPath

Check the example1 from my repo.

<强> 2。使用url-loader和html-loader，然后同步加载图片

图像将被编码为base64字符串，并插入到您的模块中。（因此它将同步加载。）只需将webpack.config.js更新为此

即可

//webpack.config.js
loaders: [
    {
      //IMAGE LOADER
      test: /\.(jpe?g|png|gif|svg)$/i,
      loader:'url'
    },
    {
      // HTML LOADER
      test: /\.html$/,
      loader: 'html-loader'
    }
]

Check the example2 from my repo.

第3。仅使用url-loader并手动要求图片

我们假设你有MyComponent，而且你想要你的形象，

//myJS
var imgContent = require('./xxx.png');//require the image, with url-loader, you will get the base64 encoded string

//set src with pure js

//var img = document.createElement('img');
//img.setAttribute('src', imgContent); //set it to src
//document.body.appendChild(img);

//set src with React ES5
var MyComponent = React.createClass({
    render: function() {
        return (
            <img src={imgContent} />
        );
    } 
});

这样你的webpack.config就会这样设置，

//webpack.config.js
loaders: [
    { test: /\.(png|jpg)$/, loader: 'url?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
]

Check the example3 from my repo.

P.S。您可以使用webpack-image-loader缩小图像。

希望这会有所帮助。

如何使用webpack为React构建映像？

1 个答案: