首页 文章

Webpack - 使用文件加载器需要图像

提问于
浏览 次
5

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

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

但是，我不知道如何将图像链接到我的组件 . 我在'Data.js'文件中保存图像的'src'，从那里我将图像的数据传递给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
            }
...

我的反应演示组件，我只是使用 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",
...

全球目录图像的 Value ：

enter image description here

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

EDIT : 阅读后，我认为webpack需要参考图像的相对位置，所以我将webpack.config.js修改为以下内容：

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

但是，这并没有解决问题 . 指导将非常感激 .

javascript reactjs webpack webpack-dev-server webpack-file-loader

2 回答

  • 3

    建议：

    1.Use url-loader for images.
    通过在webpack配置中指定 limit ，例如： url-loader?limit=8000 ，如果文件小于8000字节 . url-loader 作品似乎是 file-loader . 将文件嵌入主条目的包输出中 . 如果没有，请参见第2点 .

    2.Use url(address) in css/scss for use images
    这是一个由Webpack和url-loader提供支持的示例：
    background: url('../images/heroBanner.png') no-repeat center center fixed;

    因为文件足够大，webpack就像其他bundle一样将文件转换为输出目录 . 它将在加载网页时发送此图像的HTTP请求 .

    enter image description here

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

    回复于
  • 3

    webpack现在不支持异步资源，这意味着如果你想要图像，你应该只向它发送图像路径 . 就像这样：

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

    图像的url不能是变量，因为当webpack捆绑你的代码时，它不会运行你的代码，所以它不能知道变量的值 .

    如果你真的想要异步要求 . 你可以尝试使用require.ensure

    回复于

相关问题