브라우져가 2x, 3x 이미지를 구분하는방법

게시물 수정 , 삭제는 로그인 필요

디자이너님이 이미지 3개를 보내주셨는데요

실험삼아 이걸 콘솔에 찍어봤는데 

1x이미지는 데이터가 콘솔에 잘 찍히는데 유독 2x와 3x 사진들은 데이터가 절대 안찍히더군요

아래는 받은 사진 3개이구요

아래는 차례대로 콘솔을 찍어본 결과입니다

console.log(require(`./logos/logo1.png` ))

console.log(require(`./logos/[email protected]` ))

console.log(require(`./logos/[email protected]` )

했더니

이렇게 뜹니다.

보시다시피 첫번째 사진(1x크기) 은 데이터가 잘 찍히는데 2x와 3x크기 사진들은 그냥 상대경로만 찍히고 끝나네요.

사진에 @2x 또는 @3x 같은 문구가 들어있어서 그런가 싶어서

아래와같이도 실험 해봤습니다.

console.log(require(`./logos/one.png`))

console.log(require(`./logos/two.png`))

console.log(require(`./logos/three.png`))

이름은 그냥 원 투 쓰리 일뿐입니다.

결과는 같습니다 ㅠㅠ

브라우져가 귀신같이 2x와 3x 이미지를 알아채고 인식을 못합니다... 왜이러는 걸까요? 분명 같은 png인데.. 

사진크기가 좀 다르긴 한데 (각각 3KB, 10KB, 20KB) 이거랑은 관련이 없을듯 하구요

왜이러는 걸까요?