Javascript 网页包4文件加载器

我正在使用

现在我正在尝试部署到测试服务器。我的问题是位于src/assets/img的图像

我的angular 4代码组件和视图：

// Component
public ngOnInit() {
  this.logoUrl = require('../../assets/img/co-logo.png');
}

// View
<img flex src="{{logoUrl}}" alt="Logo">

输出似乎一点也不差，我得到了以下结果：

 » app  
  » dist  
   » assets  
    » img  
    - b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

问题

加载页面时，如果我检查图像的url，它只会检索到以下内容：

/app/dist/01b401fa5bdbfdc4e3daf75d72fa76b9.png

我期待着这样的事情：

/app/dist/assets/img/b1249ef43aea4c57bcc7782f6a0ebb99_co-logo.png

我至少尝试过以下参数：

publicPath: '/assets/img/'
name: '/assets/img/[hash]_[name].[ext]'

有人能帮我吗？从昨天起，我就一直在努力解决这个问题：/

谢谢大家!

---

编辑：

解决问题时，有两件事可以让事情变得清晰和简单

确保webpack配置的output.path指向 目标文件夹。我相信它的应用程序文件夹在你的情况下。注意 该output.path采用绝对路径，即使用路径模块。 在文件加载器中取出publicPath，直到解决问题。 使用文件加载器输出路径的相对路径，即资产/img 一旦你做了这些改变，事情就会如预期的那样进行。然后，您可以根据需要尝试将publicPath放回文件加载器

---

一般来说，我不会使用publicPath，除非我有不同的环境来处理ex.prod和dev。但这就是我。

您好。output.path=helpers.root'dist'{test://\.jpg | png | gif$/，使用：[{loader:'file loader'，选项：{outputPath:'assets/img/'，name:'[hash].[name].[ext]}}，但仍然，有了这个“`我现在得到的是assets/img/b1249ef43aea4c57bcc7782f6a0ebb99.co-logo.png，而不是app/dist/assets/img/b1249ef43aea4c57bcc7782f6a0ebb99.co-logo.png。谢谢。上次我在上面做了这个功能，但现在我仍然遇到了最后一个评论问题：/Hmm，请编辑原始帖子以包含您当前的完整网页配置。您好。在第一篇文章的末尾。谢谢。很遗憾，您附加的配置是部分配置。在构建时，还将合并其他配置选项。尽管如此，该文件中文件加载器的配置在测试时仍能正常工作。接下来要看的是合并后的有效网页配置。你能告诉我吗。添加console.logJSON.stringifymodule.exports，null，2；在同一文件的末尾。2.运行WebpackBuild3。查看它登录到控制台的有效网页包配置。如果我不得不猜测的话，在合并过程中一定有一些覆盖。

publicPath: '/assets/img/'
name: '/assets/img/[hash]_[name].[ext]'