如何在Web上使用css中的图像

我正在制作React w/Webpack安装程序，并且正在努力完成似乎应该是一项简单的任务。我想要webpack包含图像，并尽量减少它们像我一样吞咽，但我无法弄清楚。我只是希望能够将图像在我的CSS像这样链接：如何在Web上使用css中的图像

/* ./src/img/background.jpg */ 

body { background: url('./img/background.jpg'); }

我有我所有的CSS/JS/img目录的src文件夹内。 Webpack输出到dist文件夹，但我无法弄清楚如何在那里获取图像。

这里是我的WebPack设置：

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    devtool: 'cheap-eval-source-map', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    // publicPath: './dist', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
    template: './src/index.html' 
    }) 
    ], 
    module: { 
    loaders: [{ 
    exclude: /node_modules/, 
    test: /\.js?$/, 
    loader: 'babel' 
    }, { 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
    }, { 
    test: /\.(png|jpg)$/, 
    loader: 'file-loader' 
    }] 
}, 

devServer: { 
    historyApiFallback: true, 
    contentBase: './dist', 
    hot: true 
    } 
};

来源

2016-02-12 user3737841

我被卡住了类似的问题，并发现可以使用url-loader解决你的CSS "url()"声明任何其他要求或import语句。

进行安装：

npm install url-loader --save-dev

它将安装，可以解决路径转换为Base64字符串装载机。

在你的WebPack配置文件使用的URL装载机在装载机

{ 
    test: /\.(png|jpg)$/, 
    loader: 'url-loader' 
}

还要确保正确，指定你的公共路径，你要加载图像的路径。

来源

2016-02-12 18:26:57 WitVault

@ user3737841它解决了你的问题吗？ – WitVault

那么我的webpack-dev服务器服务于/ dist，我的图像在/ src中，所以你知道我将如何引用我的.css文件中的图像？图像应该与我的bundle.js一起卷起来吗？我只是不确定如何让它们到/ dist，因为/ dist文件夹只是从webpack-dev-server服务的虚拟文件夹 – user3737841

@ user3737841您应该能够在样式表中“需要”图像。例如，'background-image：url（'../ assets/img/logo-dark.png'）'。你只需要尝试/调整以获得正确的路径。 –

如何在Web上使用css中的图像

回答

相关问题