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为图像输出错误路径

回答

相关问题