Webpack-使用文件加载器需要图像 [英] Webpack - Require Images Using File-Loader

问题描述

我正在使用webpack的Reaction应用程序。

我在webpack的配置中安装了‘文件加载器’和‘网址加载器’。

但是，我不确定如何将图像链接到我的组件。我将该图像的‘src’保存在一个‘Data.js’文件中，我从该文件将该图像的数据传递给Reaction组件。

我的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
            }
...

我是我的Reaction演示组件，我只是使用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.fig.js修改为：

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

然而，这并没有解决问题。我们将不胜感激。

推荐答案

建议：

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

这篇关于Webpack-使用文件加载器需要图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！