htmlpreload

Preload Image in html gives warning message

Preloaded the image to be used in the page using link preload

<link rel="preload" href="http://shmdhussain.github.io/WebTest/test_img/blue.png" 
crossorigin="anonymous" as="image">

but in the browser getting warning as

enter image description here

preload for 'https://shmdhussain.github.io/WebTest/test_img/blue.png' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

I expect it to work but I am seeing two downloads for the same resource(image)

see this demo https://hussain-test.glitch.me/ , open console to see the warning , thanks in advance for any help.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  <title>HTML BolierPlate</title>
  <link rel="preload" href="https://shmdhussain.github.io/WebTest/test_img/blue.png" crossorigin="anonymous" as="image">
  <style>
    .font32 {
      font-size: 32px
    }
  </style>
</head>
<body>
  Welcome to BoilerPlate!!!
  <p>
    <img src="https://shmdhussain.github.io/WebTest/test_img/blue.png">
  </p>
</body>
</html>

Solution

  • There is no need to user crossorigin when you preload an image! Images do not need CORS

    Just remove crossorigin

    WITH crossorigin your will see one failing preload and one successful load