向javascript对象添加唯一图像

多亏了，我有了一个排行榜代码，它使用Javascript数据根据玩家的分数创建和排序玩家

该代码只为每个玩家的个人资料使用一个源和一个图像。但很明显，我想为每个玩家加载独特的图片作为他们的个人资料图片

下面是正在运行的代码

及

Javascript:

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profiles.push(profile4);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) { 
return b.points-a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

let count = 1;
profiles.forEach(function(entry) {
    let img = document.createElement('img');
  img.className = "profilePic";
  img.src = "https://placeimg.com/50/50/people";
    let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>"+ entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
    profilesDiv.appendChild(profile);
  count++;

});

HTML:

此行：

img.src = "https://placeimg.com/50/50/people";

为每个播放器设置图像源

如果您希望每个玩家都有一个唯一的个人资料图片，那么应该为每个玩家个人资料添加一个src属性

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.src = "Image source here";
profiles.push(profile1);

然后在forEach循环中：

profiles.forEach(function(entry) {
  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.src;
  /....
 )}

---

您必须为每个配置文件添加属性图像

profile1.img= "https://randomuser.me/api/portraits/men/12.jpg"

img.src = entry.img;

然后检索它以显示每个配置文件

profile1.img= "https://randomuser.me/api/portraits/men/12.jpg"

img.src = entry.img;

JavaScript

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.img= "https://randomuser.me/api/portraits/men/12.jpg"
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane Smith";
profile2.points = 1600;
profile2.img= "https://randomuser.me/api/portraits/women/22.jpg"
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 400;
profile3.img= "https://randomuser.me/api/portraits/men/22.jpg"
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profile4.img= "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile4);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) { 
return b.points-a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

let count = 1;
profiles.forEach(function(entry) {
    let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;
    let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>"+ entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
    profilesDiv.appendChild(profile);
  count++;

});

.profile {
  border: 2px solid #555555;
  padding: 10px;
  margin: 5px;
  width: 30%;
  height: 50px;
  line-height: 50px;
}

.profile img, .profile .name {
  float: left;
  margin-right: 20px;
  width: 50px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
}

.profile img {
  border-radius: 50%;
  box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);
}

.points {
  float: right;
}