如何使用相對路徑使用webpack爲我的網站加載圖像？

我正在嘗試組合一個網站進行部署，並且有一些困難，因此我可以從項目目錄中相對於.scss文件以及相對於項目中的各種.js文件中提取圖像。我不擅長webpack，我遵循了一個樣板設置來使其工作，但沒有真正學到它。爲了讓圖像起作用，我必須將它們從計算機上的位置完全拉出。當我嘗試正確部署它時，這不起作用？如何使用相對路徑使用webpack爲我的網站加載圖像？

我需要在我的scss文件（url（''））中實現一個背景圖像，以及反應組件中名爲Portfolio-Piece的許多圖像。

我確實安裝了resolve-url-loader和sass-loader。這是我的WebPack配置...如果有人能ELI5使用的WebPack時，什麼是根

var webpack = require('webpack'); 
var path = require('path'); 


var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { test: /\.scss$/, loaders: ["style", "css", "sass", 'resolve-url','sass?sourceMap']}, 
     { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
     { test: /\.(jpg|png)$/, loader: "file-loader?name=[path][name].[ext]" } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ] 
}; 

module.exports = config;

獎勵積分？相對路徑從哪裏來？ index.js？ index.html的？

來源

2016-05-09 MindfulBell

首先，resolve-url-loader必須位於配置中的sass-loader之前。你有sass loader兩次：sass和sass?sourceMap。我會努力改變你的第一個裝載於以下內容：（刪除第一SASS）

{ test: /\.scss$/, loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']},

在我的項目，我喜歡添加背景圖片樣式，內嵌式上我的反應成分和使用require聲明。這裏有一個例子：

var PortfolioPiece = React.createClass({ 
    render: function() { 
    return (
     <div 
     className="wrapper" 
     style={{ backgroundImage: `url(${require('./my-img.png')})` }} 
     > 
    ); 
    } 
});

的require('./my-img.png')的通話將被解析到的網址，讓這一形象的生活。

便箋：在代碼中混合使用雙撇號和單撇號。你應該堅持一個或另一個。

來源

2016-05-09 21:28:32 mgmcdermott

如何使用相對路徑使用webpack爲我的網站加載圖像？

回答

相關問題