Currently, I'm tackling a project that came to the company through an outsourced channel. My query concerns the rendering of an image src.
In the past, images were served from the filesystem. However, we've now transitioned to using AWS S3 bucket serving and cloudfront caching. We aim to send a URL from backend to frontend for image rendering.
In my model, there's a function that fetches the image URL from the backend and returns it. But during the rendering process, the image src ends up being set as [object Object], presumably setting it to the function instead of the response.
Below is the function responsible for retrieving the 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;
}),
And here's where we call image.baseUrl, resulting in the src displaying as [object Object]:
{{lazy-image
url=(concat image.baseUrl)
alt=(if title title (if image.title image.title 'Image'))
class=(if class class 'img-responsive')}}