Question 390375 in Html Question posted in
Some basic documentation can be found here.

Html – image loading on chrome but not safari

I am new to coding and finished this project for freecodecamp.
For some reason my logo will load on chrome but not on safari.
Any ideas why?

const checkButton = document.getElementById('check-btn') ;
const userInput = document.getElementById('text-input');
const result = document.getElementById('result');

checkButton.addEventListener("click", () => {
  const filtered = userInput.value.toLowerCase().replace(/[^A-Za-z0-9]/g,'')
  if (userInput.value === ''){
    alert("Please input a value");
    return;
  }
  else if (userInput.value.length === 1) {
    result.innerText = `${userInput.value} is a palindrome`
    
  }
  else if (filtered === [...filtered].reverse().join('')) {
    result.innerText = `${userInput.value} is a palindrome`
  }
  else  {
    result.innerText = `${userInput.value} is not a palindrome`
  }
})
* {
  background: #39a0ca
}
[class*="col-"] {
  width: 100%;
}

#palindrome-logo {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  max-height: 50%;
}
#main-heading {
  margin: auto;
  width: 50%;
  padding: 40px;
  text-align: center;
}
.input-box {
  margin: auto;
  width: 80%;
  padding: 10px;
  text-align: center;
  background: #F9BD21;
  border-radius: 25px;
  font-size: 20px;
}
#label-text {
  background: #F9BD21;
  border-radius: 10px;
}
#text-input {
  width: 200px;
  height:25px;
  background: white;
}
#check-btn {
  height: 25px;
  background: #F9BD21
  font-size: 20px;

}
#result {
  background: #F9BD21;
}
.palindrome-definition {
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
  font-size: 20px;
}
.famous-palindromes {
  margin: auto;
  width: 80%;
  padding: 10px;
  text-align: center;
  background: #B8DD23;
  border-radius: 25px;
}

.famous-palindromes>h3 {
  background: #B8DD23;
  font-size: 30px;
  margin-top: 10px;
}

#famous-palindrome1 {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-size: 20px;

}
#famous-palindrome2 {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Palindrome Checker</title>
    </head>
    <body>
      <main class="main">
      
      
        <!-- This is the image in question -->
        <img id="palindrome-logo" src="https://www.dropbox.com/scl/fi/uwrbc12c03tkjwwwokqnl/Palindrome-ganged-Rainbow.jpeg?rlkey=55uekbklccvbdabwob1aopo6h&st=bxr0acns&dl=1" alt=
        "palindrome logo">
        
        
        <h1 id="main-heading">Is it a palindrome?</h1>
        <div class="input-box">
          <label id="label-text" for="text-input">Check if your word or statement is a plaindrome!
            </label><br>
            <input id="text-input" type="text"></input>
            <button id="check-btn">Check</button>
        <div id="result"></div>
          </div>
      <div class="palindrome-definition">
        <p id="definition-paragraph">Palindrome: a word, phrase, or sequence that reads the same backward as forward.</p>
        </div>
      <div class="famous-palindromes">
        <h3>Famous palindromes</h3>
        <p id="famous-palindrome1">“Madam, I’m Adam”</p>
        <p id="famous-palindrome2">"A nut for a jar of tuna."</p>
      </div>
        </main>
      <script src="script.js"></script>
      </body>
    </html>

I have checked the size of the file and it doesn’t appear to be too large.

Tags:

2

Answers


  1. 0

    Hey welcome to the world of coding happy to have ya!

    Safari tends to have some difficulties with the dropbox image host, my suspicion is they just don’t send over the CORS headers in a fashion that Safari likes so Safari just blocks the image from rendering entirely.

    A good way to debug this would be to see if you can load the image in dropbox and see it in Safari but otherwise I recommend to store your image file within a different image host or directly in a assets folder to be referenced in the root of your project. Another option is to just pass this in as a url from the original source. I tested this by swapping out the image url in your code pen with this picture of a bunny and it rendered in Safari. https://as1.ftcdn.net/v2/jpg/08/19/04/84/1000_F_819048405_47BzeWgwgZraZTSjq52e0ARAQQmWaMRW.jpg

    I hope this helps!

    Login or Signup to reply.
  2. 0

    What you are doing is called "hot linking" and should be avoided when possible as there can be downsides for both the user and creator of the image.

    • The creator of the image could change it without the user of the
      image even knowing and then the user would be displaying that new
      image in their site.
    • The user of the image would add additional traffic to the creator’s
      site without the creator getting the benefit of people actually
      seeing the site.

    Because of this, hot linking is discouraged and can actually be blocked by many hosting services. Most likely what you are experiencing is a Cross Origin Request Sharing (CORS) exception that is being triggered by Safari because no CORS permission has been given.

    If possible, get permission from the source to use their image and make a copy of it to host on your own web server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search