Webpack - 使用File-Loader加载图片

Question

我正在为我的React应用程序使用Webpack。

我在webpack配置中安装了“File-loader”和“Url-loader”。

然而，我不确定如何将图像链接到我的组件。我将图像的'src'保存在'Data.js'文件中，从那里我将图像数据传递给React组件。

我的webpack.config.js：

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true,
                    presets : [ "react", "es2015" ]
                },
                include : PATHS.app
            },
            {
                test : /\.(jpg|png)$/,
                loader : "file-loader?name=[name].[ext]",
                include : PATHS.app
            }
...

在我的React展示组件中，我只是使用require来获取图片：

const PreviewTemImgParent = ({ data }) => {
    let img = require( data.get( "src" ));
    return(
        <div className = "card previewImgParent">
            <img
             src = { img }
    ...

Data.js文件包含每个图像的绝对路径（主应用程序文件夹），我可能在这里做错了：

export const previewTemImgData = Map({
    body : List.of(
        Map({   // using immutable.js
            src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png",
            alt : "image",
            className : "flipParent",
...

全球目录图像，仅供参考：

我想知道我在哪里犯了错误，以及如何解决这个问题？

编辑： 阅读了一些资料之后，我发现webpack需要相对位置的图像引用，所以我已经修改了webpack.config.js如下：

...
output : {
  path : PATHS.build,
  publicPath : "/",
  filename : "bundle.js"
}
...

然而，这并不能解决问题。非常感谢您的指导。

- Kayote

Answer 1

目前webpack不支持异步资源，这意味着如果您想要引入图片，只需将其路径发送给它即可。就像这样：

let img = new Image();
img.src = require('./images/1.jpg');

图片的URL不能是一个变量，因为当Webpack打包您的代码时，它不会运行您的代码，所以无法知道变量的值。

如果您真的想异步加载，可以尝试使用require.ensure。

- chenkehxx

Answer 2

建议：

1.使用url-loader处理图片。
在webpack配置中指定limit，例如：url-loader?limit=8000，如果文件大小小于8000字节，则url-loader会像file-loader一样工作。将文件嵌入到主入口的捆绑输出中。否则，请参见第2点。

2.在css/scss中使用url(地址)来使用图片
以下是由Webpack和url-loader提供支持的示例：
background: url('../images/heroBanner.png') no-repeat center center fixed;

由于文件足够大，Webpack会将该文件转换为其他捆绑包一样输出到输出目录中。当网页加载时，它会发送HTTP请求以获取此图像。

https://github.com/EcutDavid/EcutDavid.github.io/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2

- David Guan