Question

从API中，我获得了需要在VIEW（html页面）上显示的图像的结果。我得到了图像的ID，并且我还有一个api，它从给定的ID返回图像。

在组件的.ts中，我获取了需要显示的图像的ID，并通过以下方式将其放入列表中：

async attached(){
for(var i = 0; i<this.searchResults.length;i++){
let image = this.searchResults[i].carImage;
let response = await this.api.get(`/images/${image}`);
this.carImages.push(response);
}}

然后在我的组件的.html文件中执行以下操作

<div class="col-4" repeat.for="result of searchResults">
            <div class="card" >
              <img class="card-img-top" src="${carProfilePicture(result.carImage)}" alt="Card image cap">
              <div class="float-right card-price" style="text-align:center">
        <span><span style="font-weight:bold;">$ ${result.price}</span> /day</span>
              </div>
              <div class="card-body">
                <h5 class="card-title">${result.make} ${result.model} - ${result.year}</h5>
                <label class="card-text">20+ trips - <span style="border: 1px solid black;"> ${result.carClass}
                    class </span></label>
                <p><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></p>
                <button class="btn btn-secondary" click.trigger="navigateToCar()">Continue <i class="fas fa-angle-right"></i>
                </button>
              </div>
            </div>
          </div>

然后我还有另外1个函数，可以返回每个元素的汽车图片

async carProfilePicture(imageId) {
    let response = await this.api.get(`/images/${imageId}`);
    return response;
  }

但是图片没有显示在我的html中，所以我不知道这是什么问题，下一步需要尝试什么。非常感谢

Aurelia或Webpack没有按时绑定图像

0 个答案: