为啥我正在加载的图像丢失？ [复制]

Posted 2023-02-22

【中文标题】为啥我正在加载的图像丢失？ [复制]

【英文标题】：Why the image I'm loading is missing? [duplicate]为什么我正在加载的图像丢失？ [复制]

【发布时间】：2019-08-11 01:30:21

【问题描述】：

我有一个实际上是排行榜的代码。我有 3 个问题要修改代码，这是第一个（我将为每个问题创建单独的问题）。

第一个问题：我不知道为什么缺少 imgDiamonds，我只能在最终输出中看到一个黑点，而不是 Diamonds.png 以及如何修复它。

结果如下：

这里更清楚的是加载图像配置文件的代码示例行，并且可以正常工作：

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

这是导致问题的丢失图像：

profile1.imgDiamonds = "Diamonds.png";

代码如下：

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】：

问题出在这条线：

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

imgDiamonds 不是 HTML 属性。这应该可以解决问题：

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

也相应地编辑你的CSS：

.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);

【讨论】：

Oh Nooooo.... 现在 imgDiamonds 将拥有所有 CSS 功能，如果 img... 如何解决这个...。

您可以使用不同的类。我编辑了我的答案，检查一下

【参考方案2】：

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

应该是 let imgDiamonds = document.createElement('img');

您的 Object 属性声明也可以更好地阅读（恕我直言）。 这个：

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 profile1 = 
  name: "Jim Bob",
  job: "Doctor",
  points: 1500,
  img: "https://randomuser.me/api/portraits/men/12.jpg",
  imgDiamonds: "Diamonds.png"


profiles.push(profile1);

【讨论】：

Oh Nooooo.... 现在 imgDiamonds 将拥有所有 CSS 功能，如果 img... 如何解决这个...。

@SaraRee 给它上课。然后你可以专门设计它。也许是.imgDiamonds的一类，那么你可以去.profile .imgDiamonds //styles//