EmberJS config prod img src url

EmberJS config prod img src url

本文关键字：src url img prod config EmberJS      更新时间：2023-09-26
 Ember      : 1.13.6
 Ember Data : 1.13.7

我需要能够设置全局属性并在我的 .hbs 文件中使用它。假设对于生产，我需要从另一台服务器提供图像，但在本地开发它们可以相对于项目进行分离。

<img src="{{imgSrc}}/spinner.gif" alt="Loading..."/>

如何设置全局属性或配置并在 .hbs 文件中使用它？

这是我能够想到的似乎有效但不知道这是否是一个"好主意"。

配置/环境.js - 为 envs 设置可配置的imgSrc属性

module.exports = function(environment) {
  var ENV = {
    //...
    APP : {
      imgSrc: '/prod/path/to/assets/'
    }
    //...
  };
  if (environment === 'development') {
    ENV.APP.imgSrc = 'assets/images/';
  }

应用.js - 使imgSrc属性在应用中可用 

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
var App;
//...
App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver,
  imgSrc: config.APP.imgSrc
});
//...
export default App;

----- 创建一个名为img-src-----的组件

模板/组件/img-src.hbs

<img src="{{imgSrc}}{{image}}" alt="{{alt}}"/>

组件/img-src.js

import Ember from 'ember';
export default Ember.Component.extend({
   tagName: 'div',
   imgSrc: myApp.imgSrc
});

HBS 组件使用情况

{{img-src image="spinner.gif" alt="Loading..."}}

这花了吗？

相关文章：