Webpack爲圖像輸出錯誤路徑

我正在用react和webpack構建網站。當我使用webpack構建應用程序並嘗試包含圖像時，圖像會與其他資源一起寫入構建文件夾，但webpack輸出的圖像鏈接不正確。我可以進入構建文件夾並查看圖像，因此它被正確複製，這是錯誤的鏈接。Webpack爲圖像輸出錯誤路徑

我的反應成分如下：

'use strict'; 
 

 
var React = require('react'); 
 
var newsFeedIcon = require('../../img/news-feed-icon.png'); 
 

 
//create story component 
 
module.exports = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="col_12 footer-right mobile-foot"> 
 
     <img src={newsFeedIcon} /> 
 
     <p><a href="/about">About Us</a> | <a href="/contact">Contact Us</a> | <a href="/faq">FAQ</a> | <a href="/media">Media</a> | <a href="#">Privacy Statement</a> | <a href="#">Terms of Service</a></p> 
 
     </div> 
 
    ); 
 
    } 
 
})

我的WebPack配置是這樣的：

webpack: { 
 
     client: { 
 
     entry: __dirname + '/app/js/client.jsx', 
 
     output: { 
 
      path: 'build/', 
 
      file: 'bundle.js' 
 
     }, 
 
     module: { 
 
      loaders: [ 
 
      { 
 
      test: /\.jsx$/, 
 
      loader:'jsx-loader' 
 
      }, 
 
      { 
 
      test: /\.css$/, 
 
      loader: "style-loader!css-loader" 
 
      }, 
 
      { 
 
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, 
 
      loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
 
      },   
 
      { 
 
      test: /\.jpe?g$|\.gif$|\.png$/i, 
 
      loader: 'file-loader' 
 
      }, 
 
      { 
 
      test: /\.jpg/, 
 
      loader: 'file' 
 
      }] 
 
     } 
 
     }, 
 
     test: { 
 
     entry: __dirname + '/test/client/test.js', 
 
     output: { 
 
      path: 'test/client/', 
 
      file: 'bundle.js' 
 
     }, 
 
     module: { 
 
      loaders: [ 
 
      { 
 
      test: /\.jsx$/, 
 
      loader:'jsx-loader' 
 
      }] 
 
     } 
 
     }, 
 
     karma_test: { 
 
     entry: __dirname + '/test/karma_tests/test_entry.js', 
 
     output: { 
 
      path: 'test/karma_tests/', 
 
      file: 'bundle.js' 
 
     }, 
 
     module: { 
 
      loaders: [ 
 
      { 
 
      test: /\.jsx$/, 
 
      loader:'jsx-loader' 
 
      }] 
 
     }, 
 
     background: true 
 
     } 
 
    },

自昨天以來，我一直在撞牆，所以任何幫助，將不勝感激。讓我知道你需要更多的信息。

謝謝！

來源

2015-10-20 CascadiaJS

您可以嘗試爲文件加載器以及output.publicPath設置名稱選項。

output: { 
    path: 'build/', 
    file: 'bundle.js', 
    publicPath: '/assets' 
}

...

{ 
    test: /\.(png|jpg)$/, 
    loader: 'file-loader?name=/img/[name].[ext]' 
}

然後在你需要解決的網址是：

/assets/img/news-feed-icon.png

來源

2015-10-20 23:08:22 hampusohlsson

這裏添加一票，因爲建議的解決方案實際上解決了我的問題 - 沒有檢查這與實際問題相反 - 這是OP的責任。 – arcseldon

Webpack爲圖像輸出錯誤路徑

回答

相關問題