EmberJS：如何加载相对于 rootURL 的资产或使用绝对路径加载资产

Question

这可能是一个很常见的问题，但我在谷歌上找到的内容对我没有帮助。

我有一个包含所有资产（图像等）的 emberJs 项目 我的余烬项目/公共/资产/图像/ 当我从根 URL“/”或 localhost:4200 的主页加载资产时，一切正常

例如在我的主页中 我有一个带有 img 标签的组件，看起来像这样

<img src="assets/images/articles/article-1.jpg"/>

在另一个带有 url localhost:4200**/articles/** 的页面上，我还加载了具有相同标签的相同图像 但据我所见，它试图从 localhost:4200/articles/assets/images/articles/article-1.jpg 而不是从正确的路径 localhost:4200/assets/images/articles/article-1 加载图像.jpg

如果我想在根文件夹中托管我的项目，在“assets/images/”之前添加“/”对我有用 但是当我需要在子目录上托管我的项目时，我的 url (www.mydomain.com/ember-project-here/)

如何从绝对路径或相对于我的 rootURL 设置加载我的资产 添加 {{rootURL}} 似乎对我没有任何作用

Answer 1

看来，{{rootURL}} 在 hbs 文件中不起作用（很久以前我曾经认为可以）。

{{env 'rootURL'}} 应该可以工作，其中env 是一个这样定义的助手：

import { get } from '@ember/object';
import { helper } from '@ember/component/helper';
import ENV from 'project-name/config/environment';

export default helper(function([path]) {
  return get(ENV, path);
});

Answer 2

您可以添加一个path 助手：

import { helper } from '@ember/component/helper';
import ENV from 'project-name/config/environment';

export default helper(function([path]) {
    return path.replace(/^~\//, ENV.rootURL);
});

你可以做的：

<img src={{path "~/assets/images/articles/article-1.jpg"}} />

这很好，因为您也可以使用变量：

<img src={{path this.myPath}} />

和myPath:

get myPath() {
  return `~/assets/images/${this.args.iconName}.jpg`;
}

Answer 3

您在这方面做了很好的研究。是的，rootURL 是您想要添加到项目中的那个，因为您正在将应用程序部署到子文件夹中。

rootURL 可以使用config/environment.js 文件添加到任何 Ember 应用程序。

// config/environment.js

module.exports = function(environment) {
  var ENV = {
    // other configs...
    rootURL: '/ember-project-here/',
  };
}

The official guide 可以给你一些额外的信息！