javascript - Ember 未在生产环境中加载某些图像

Question

我有一个 Ember-cli 1.13 应用程序，它在公共(public)目录中存储了大量图像。现在，它将正确加载除特定组件中的图像之外的所有图像。

组件是这样调用的:

{{list-item url="list-url" name="List Name" price="240"}}

在内部，组件是这样的:

<a href="http://example.com/{{url}}">
  <img src="/{{url}}.png" alt='Picture of the {{name}}' />
  <p class="item-name">{{name}}</p>
  ...
</a>

当我构建应用程序并启动到 heroku 时，断开的路径是

https://ridiculous-name-123123.herokuapp.com/list-item.png

这与本地主机路径相同，只是域明显不同。

所有其他图像在不与组件一起使用时都有效。

我哪里错了？

Answer 1

当您使用生产环境构建时，您的 Assets 会经历称为 fingerprinting 的过程.

这里的问题似乎是您“构建”的 url 链接到未指纹识别的文件，一种解决方案是将这些图像移动到一个文件夹中并将它们排除在指纹识别之外，在您的 ember- cli-build.js:

var app = new EmberApp({
  fingerprint: {
    exclude: ['myComponentImages/']
  }
});

更好的解决方案是拥有完整的 url 或传递一个类来更改显示的图像，因为它们看起来像是静态 Assets 而不是用户上传的内容。