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

Question

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

我有一个包含所有资产（图像等）的 emberJs 项目 my-ember-project/public/assets/images/ 当我从主页加载资产时一切正常，主页是根 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[=11= 加载图像]

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

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

Answer 1

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

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

// config/environment.js

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

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

Answer 2

看来，{{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 3

您可以添加一个 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`;
}

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

EmberJS: How to load assets relative to rootURL or load assets using absolute path

html

ember.js