我目前正在做一个项目,这是给公司通过外包媒体。我的问题是在有关渲染图像源代码。
以前他们从文件系统提供图像。我们不再想使用这种方法,因为我们现在整合了AWS S3 bucket服务。我们还使用cloudfront缓存,因此我们希望能够从后端向前端发送URL(我们确实这样做了),然后渲染图像。
在模型中,我有一个函数,它从后端检索图像URL并返回它,但是在渲染过程中,图像src被设置为[object Object],我认为这是将src设置为函数而不是响应。
这是我们用来呈现和检索url的函数
baseUrl: Ember.computed(async function () {
let adapter = this.store.adapterFor('article-image');
let ajax = this.get('ajax');
let path = ''
let API_URL = `${adapter.buildURL('article-image', this.id)}/original/${this.get('fileName')}`;
let promise = new Promise((resolve, reject) => {
ajax.request(API_URL, {
method: 'GET'
})
.then(function (response) {
resolve(response.path);
})
.catch(function (err) {
console.log('error');
console.log(err);
});
})
path = await promise
return path;
}),
这里是我们调用图像.baseUrl的地方,其中src被设置为[object Object]
{{lazy-image
url=(concat image.baseUrl)
alt=(if title title (if image.title image.title 'Image'))
class=(if class class 'img-responsive')}}
1条答案
按热度按时间n53p2ov01#
在这里,您将从计算属性返回一个承诺,该属性是一个对象,而不是字符串。
通常,我们并不等待承诺得到解决才呈现组件,而是先呈现一些东西(比如加载中的gif),然后在承诺得到解决时重新呈现图像。
对于这个问题有两种传统的解决方案,一种是在计算属性中使用PromiseProxy。
ember-concurrency
您可以在模板中使用如下代码:
请参阅https://api.emberjs.com/ember/release/classes/PromiseProxyMixin
第二个传统的解决方案是使用
ember-concurrency
,避免返回promise的计算属性,这需要重写代码使其更具强制性。请参阅http://ember-concurrency.com/docs/introduction/
我通常更喜欢这种解决方案,因为使用promise代理可能会变得复杂和难以理解。
此外,如果您使用的是更现代的Ember版本(2.10或更高版本),您可以尝试
ember-lifeline
,它比ember-concurrency
要少得多,沿着有一个更简单的API,足以满足此需求。(根据代码示例,我假设您使用的是更旧版本的Ember,但使用的是现代浏览器。)请参见https://ember-lifeline.github.io/ember-lifeline/