Why the image I'm loading is missing? [duplicate]

问题: This question already has an answer here: How do you launch the JavaScript debugger in Google Chrome? 13 answers I have a code which is actually a...

问题:

This question already has an answer here:

I have a code which is actually a leaderboard. I have 3 problems to modify the code and here is the first one (I'll create separate questions for each one).

The first problem: I can't figure out why imgDiamonds are missing and I only can see a black dot on the final output instead of Diamonds.png and how to fix it.

Here is the result:

enter image description here

to be more clear here is the sample line of the code which loads the image profile and t works fine:

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

and here is the missing image that causes the problem:

profile1.imgDiamonds = "Diamonds.png";

Here is the code:

JS

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

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

let profile2 = {};
profile2.name = "Jane tanha";
profile2.job = "Dentist";
profile2.points = 2000;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg";
profile2.imgDiamonds = "Diamonds.png";
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.job = "Medic";
profile3.points = 4000;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg";
profile3.imgDiamonds = "Diamonds.png";
profiles.push(profile3);

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

let profile5 = {};
profile5.name = "Sally Peterson";
profile5.job = "Pumper";
profile5.points = 1100;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile5.imgDiamonds = "Diamonds.png";
profiles.push(profile5);

let profile6 = {};
profile6.name = "Sally Peterson";
profile6.job = "Mother";
profile6.points = 1400;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile6.imgDiamonds = "Diamonds.png";
profiles.push(profile6);

let profile7 = {};
profile7.name = "Sally Peterson";
profile7.job = "Nurse";
profile7.points = 1400;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile7.imgDiamonds = "Diamonds.png";
profiles.push(profile7);

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.job = "Taxi Diver";
profile8.points = 1400;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile8.imgDiamonds = "Diamonds.png";
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.job = "High School Student";
profile9.points = 1400;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile9.imgDiamonds = "Diamonds.png";
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.job = "Student";
profile10.points = 1500;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile10.imgDiamonds = "Diamonds.png";
profiles.push(profile10);

// 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 count = 1;
profiles.forEach(function(entry) {
let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count-1)/5)];

  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;

  let imgDiamonds = document.createElement('imgDiamonds');
  imgDiamonds.className = "profileDia";
  imgDiamonds.src = entry.imgDiamonds;


  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";


  let job = document.createElement('span');
  job.className = "job";
  job.textContent = entry.job;
  profile.appendChild(job);
  profile.prepend(img);
  profile.prepend(imgDiamonds);


  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
  profilesDiv.appendChild(profile);
  count++;

});

HTML

<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

 <link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>

CSS

.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 10px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 60px;
  box-sizing: border-box;
}

.profile .name {
  margin-right: -210px;
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {
  margin-right: -210px;
  margin-top: 25px;

  float: right;
  width: 200px;
  height: 50px;
}


.profile .count {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue";
  font-weight: 200;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 55px;
}

.profile img {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile imgDiamonds {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}


.points {
  position: absolute;
  margin: 0px 100px 100px 450px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #008CBA;
}

回答1:

The problem is the line:

let imgDiamonds = document.createElement('imgDiamonds');

imgDiamonds is not an HTML attribute. This should do the trick:

let imgDiamonds = document.createElement('img');

Also edit your css accordingly:

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

回答2:

let imgDiamonds = document.createElement('imgDiamonds');

should be let imgDiamonds = document.createElement('img');

Also your Object property declaring could read better (IMHO). this :

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

Would (to me) read better as:

let profile1 = {
  name: "Jim Bob",
  job: "Doctor",
  points: 1500,
  img: "https://randomuser.me/api/portraits/men/12.jpg",
  imgDiamonds: "Diamonds.png"
}

profiles.push(profile1);

  • 发表于 2019-03-21 14:13
  • 阅读 ( 187 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除