javascript - Javascript Korean Encoding Issue - How do i resolve github pages image 404 async error

问题描述

I'm trying to realize that when I press my photo, it changes to an angel photo, and when I press celebrity photo, it changes to a ghost photo.

In VSCode, it's good when you look at copy path, but it's image (async) 404 error just by posting it on GitHub pages. Help me. Because of this, the commit is already 40.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>친구들을 위한 사이트&lt;/title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>투표부탁해!!</h1>
    <div class="container">
      <div class="comment">누가 더 잘생겼나요?! 정답을 맞추면 선물이 와르르!</div>
      <img src="images/제혁.png" class="image-jehyuk" onclick="changeImage()"></img>
      <span>송제혁&lt;/span>
      <img src="images/고수.png" class="image-gosu" onclick="changeImage2()"></img>
      <span>고수</span>
    </div>
    <script src="index.js" defer></script>
  </body>
</html>

const jehyuk = document.querySelector(".image-jehyuk");
const gosu = document.querySelector(".image-gosu");
const mainTitle = document.querySelector("h1");
const subTitle = document.querySelector(".comment");

function makeSound() {
  let gosupick = new Audio("sounds/비명.mp3");
  gosupick.play();
}

function thanksText() {
  mainTitle.innerHTML = "감사합니다ㅎㅎ&quot;;
  subTitle.innerHTML = "감사합니다ㅎㅎ&quot;;
}

function badText() {
  mainTitle.innerHTML = "벌이닷!";
  subTitle.innerHTML = "벌이닷!";
}

function changeImage() {
  if (jehyuk.getAttribute("src") === "images/제혁.png") {
    jehyuk.setAttribute("src", "images/제혁픽.png");
    jehyuk.classList.add("bigger");
    thanksText();
  } else {
    jehyuk.setAttribute("src", "images/제혁.png");
  }
}

function changeImage2() {
  if (gosu.getAttribute("src") === "images/고수.png") {
    gosu.setAttribute("src", "images/고수픽.png");
    gosu.classList.add("bigger");
    badText();
  } else {
    gosu.setAttribute("src", "images/고수.png");
  }
}

example

标签： javascriptimagecharacter-encodingattributessetattribute

Answer

Hello, 제혁! Way I see it's just korea language encoding error

If you check "고수" === "고수" you can get false because of it is write difference encoding type (Maybe utf-8 and utf-16) So, you need to normalize your text

Korean Answer

한국어가 같게 보이는데 Javascript 특성상 인코딩 타입에 따라 글자는 같게 보이나, 서로 다른 글자로 인식하는 경우가 Mac OS(경험상) 있습니다.

콘솔로 테스트 해 본 결과 바이너리 데이터로는 "제혁픽" === "제혁픽"이 false로 나와서 없는 데이터라고 나오고 있습니다. 보통 이 문제를 해결하기 위해 String 타입에 normalize()라는 메소드를 쓸 수 있습니다.

I ask for stack overflow user's patience. I'm so sorry using our own language but it is problem about korean language encoding type.

javascript - Javascript Korean Encoding Issue - How do i resolve github pages image 404 async error

问题描述

解决方案

Answer

Korean Answer

Reference Image

推荐阅读