Images not loading from different website in Safari HTML/JavaScript

Issue

I made website where are only pictures in it and I’m displaying those images in my "main" website. In chrome, it works fine but in safari the aren’t showing up at all. Even createElement for div isn’t working. The problem is this link. Here’s my code:

for (let i = 0; i < 11; i++) {
  Draw_Images(i);
}

function Draw_Images(i) {
  var div = document.createElement('div');
  div.id = "meme" + i;
  div.style.borderRadius = "1%";
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.border = "1px solid";
  div.style.padding = "0";
  div.style.margin = "0";
  var divParent = document.getElementById("memes_container").appendChild(div);
  var img = new Image();
  img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
  img.id = "image_meme" + i;
  img.style.width = "100%";
  img.style.height = "100%";
  img.style.objectFit = "contain";
  img.className = "img-fluid";
  img.alt = i;
  img.crossOrigin = 'anonymous';
  divParent.appendChild(img);
}
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div id="memes_container"></div>
    </div>
  </div>
</div>

Solution

So removing some stuff worked for me. Basically Safari doesn’t support navigator.userAgentData so it wasn’t displaying images for that reason. So i had to remove it:

for (let i = 0; i < 11; i++) {
  Draw_Images(i);
}

function Draw_Images(i) {
  const isMobile = navigator.userAgentData.mobile;   //REMOVED THIS AND IT WORKED!!
  var div = document.createElement('div');
  div.id = "meme" + i;
  div.style.borderRadius = "1%";
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.border = "1px solid";
  div.style.padding = "0";
  div.style.margin = "0";
  var divParent = document.getElementById("memes_container").appendChild(div);
  var img = new Image();
  img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
  img.id = "image_meme" + i;
  img.style.width = "100%";
  img.style.height = "100%";
  img.style.objectFit = "contain";
  img.className = "img-fluid";
  img.alt = i;
  img.crossOrigin = 'anonymous';
  divParent.appendChild(img);
}

Answered By – Gurami30

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.