如何使用 unsplash 在循环中生成不同的随机图像

Question

我创建了一个待办事项列表项目，其中包含每个项目的图像。我正在使用 unsplash 来生成随机图像，但我得到了所有图像的相同图像。如何为我创建的每个任务获取不同的映像

我正在使用 MEAN 堆栈来创建待办事项列表项目。我使用 *ngFor 遍历所有任务，以在我的网站上为每个任务显示图像，但所有任务都具有相同的图像。

Home.component.ts

    ngOnInit() {
      this.componentGetAllTasks();
      this.randomNumber = (Math.floor(Math.random()*10));
  }
  componentGetAllTasks(){
    let obs = this._httpService.serviceGetAllTasks();
    obs.subscribe(data =>{
      console.log('Got all tasks from component', data);
      this.tasks = data['tasks'];
      this.randomNumber()
    })
  }

http.service.ts

  serviceGetAllTasks(){
    return this._http.get('/tasks');
  }

控制器

    all: (req, res)=>{
        Task.find({}, (err, tasks)=>{
            if(err){
                res.json({error: 'Cannot find all tasks', err});
            } else {
                res.json({message: 'Found all tasks!!!', tasks})
            }
        })
    },

.HTML

<div class="container card-container task-container">
    <div class="card mb-4"  *ngFor='let task of tasks'>
        <div class="row no-gutters" >
            <div class="col-md-4 gallery">
                <img src="https://source.unsplash.com/random?sig={{randomNumber}}" class="card-img">
            </div>
            <div class="col-md-8 ">
                <div class="card-body"><h5 class="card-title"><input (click)="componentDelete(task._id)" id="delete-me" class="checkbox mr-2" type="checkbox">Title: {{task.title}}</h5>
                    <p class="card-text">Description: {{task.description}}</p>
                    <p class='card-title'>Due Date: <small class='bold'> {{task.dueDate | date:"fullDate"}}</small></p>
                    <button (click)="componentGetTask(task._id)" class="btn btn-primary float-left mr-3">Edit</button>
                    <button class='btn btn-danger'>Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

我试图成功的结果是，通过使用unsplash网站，显示的每个任务都有不同的图像。非常感谢您的帮助：->

Answer 1

Pham，

在组件初始化时，您只生成一次随机数。

ngOnInit() {
  this.componentGetAllTasks();
  this.randomNumber = (Math.floor(Math.random()*10));
}

表达式 (Math.floor(Math.random()*10)) 返回一个介于 0 和 9 之间的整数，它存储在 this.randomNumber 中。顺便说一下，您不能像在方法 componentGetAllTasks() 中那样将this.randomNumber作为函数运行，因为它不是函数。

因此，您总是得到相同的图像，因为您只生成了一次随机数。要解决此问题，您需要为任务的每个条目生成此数字。你可以有一个返回随机数的方法

getRandomNumber() {
  return (Math.floor(Math.random()*10));
}

并将此方法添加到模板中

<img src="https://source.unsplash.com/random?sig={{getRandomNumber()}}" class="card-img">

请记住，这将返回一个随机数，这意味着您可以多次获得相同的数字。

Answer 2

尝试在

带有当前日期/日期的 url 末尾放置时间戳，这应该可以解决问题。例如，下面的 img 源将在每次加载时为类别"普拉提"生成一个新的随机图像。如果您想要另一个类别，只需将关键字"普拉提"更改为其他内容：

 <img src="https://source.unsplash.com/random/?pilates#<%+new Date().getTime()%>" alt="" />