웹 사이트에 이미지가 표시되지 않는 이유와 문제를 해결하는 방법 알아보기
오래된 구절은 "그림이 천 단어의 가치가있다"고합니다. 특히주의 집중력이 약한 웹에서 특히 그렇습니다. 즉,주의 집중력이 부족하고 올바른 이미지가 실제로주의를 끌거나 특정 방문자를 학습하거나 특정 작업을 수행하는 데 필요한 정보를 충분히 얻을 수 있도록 페이지 방문자를 유도하여 사이트를 만들거나 깨뜨릴 수 있습니다. 그 사이트에 대한 "승리"신호를 보내는 행동. 예, 웹 사이트의 경우 이미지가 실제로 천 단어 이상 가치가있을 수 있습니다!
따라서 온라인 이미지의 중요성이 확립되면 사이트에 있어야하는 이미지가로드되지 않으면 웹 사이트에서 말하는 내용을 고려해 보겠습니다. 이것은 CSS로 적용된 HTML 또는 배경 이미지의 일부인 인라인 이미지를 가지고 있는지 여부에 관계없이 발생할 수 있습니다 (그리고 사이트에는 둘 다있을 수 있습니다). 결론은 그래픽이 페이지에로드되지 않으면 디자인이 손상되어 일부 경우 해당 사이트의 사용자 경험을 완전히 파괴 할 수 있다는 것입니다. 사진이 보내는 "천 단어"는 분명히 긍정적 인 단어가 아닙니다!
이미지가 사이트에로드되지 않는 일반적인 이유와 웹 사이트 테스트 중이 문제를 해결할 때주의해야 할 점에 대해 살펴 보겠습니다.
잘못된 파일 경로
사이트의 HTML 또는 CSS 파일에 이미지를 추가 할 때 해당 파일이있는 디렉토리 구조의 위치에 대한 경로를 만들어야합니다. 브라우저에서 이미지를 찾고 가져올 위치를 알려주는 코드입니다. 대부분의 경우 'images'라는 폴더 안에 있습니다. 이 폴더의 경로와 파일이 올바르지 않으면 브라우저가 올바른 파일을 검색 할 수 없으므로 이미지가 제대로로드되지 않습니다. 그것은 당신이 말한 경로를 따를 것이지만 막 다른 골목에 닿을 것이며 적절한 이미지를 표시하는 대신 빈 칸으로 나옵니다.
이미지 로딩 문제를 디버깅하는 1 단계는 코딩 한 파일 경로가 올바른지 확인하는 것입니다. 아마도 잘못된 디렉토리를 지정했거나 해당 디렉토리에 대한 경로를 올바르게 나열하지 않은 것일 수 있습니다. 그렇지 않은 경우 해당 경로에 다른 문제가있을 수 있습니다. 읽어!
파일 이름 철자 오류
파일의 파일 경로를 검사 할 때 이미지 이름의 철자가 올바른지 확인하십시오. 우리의 경험에서 잘못된 이름이나 맞춤법 오류는 이미지로드 문제의 가장 일반적인 원인입니다. 웹 브라우저는 파일 이름과 관련하여 매우 용납하지 않는다는 것을 기억하십시오. 실수로 편지를 잊어 버리거나 잘못된 문자를 사용하면 브라우저는 비슷한 파일을 찾지 않고 "아, 아마 이걸 의미했을 것입니다." 아니요 - 철자가 틀리면 파일이 닫혀 있어도 페이지에로드되지 않습니다.
잘못된 파일 확장명
경우에 따라 철자가 틀린 파일의 이름을 가지고있을 수도 있지만 파일 확장자가 잘못되었을 수 있습니다. 이미지가 .jpg 파일 이지만 HTML이 .png를 찾고 있다면 문제가있을 것입니다. 각 이미지에 대해 올바른 파일 형식을 사용하고 있는지 확인한 다음 웹 사이트 코드에서 동일한 확장명을 사용해야합니다.
또한 대소 문자를 구분하십시오. 파일이 .JPG로 끝나고 모두 대문자로되어 있지만 코드 참조 .jpg는 모두 소문자 인 경우 동일한 두 문자 집합이지만 해당 웹 서버가 다른 웹 서버를 볼 수 있습니다. 대소 문자를 구분합니다! 이것이 우리가 항상 소문자로 파일을 저장하는 이유입니다. 이렇게하면 이미지 파일에서 발생할 수있는 문제를 하나 제거하여 코드에서 항상 소문자를 사용할 수 있습니다.
파일 누락
이미지 파일의 경로가 정확하고 이름과 파일 확장명에도 오류가없는 경우 다음 항목은 파일이 실제로 웹 서버에 업로드되었는지 확인하는 것입니다. 사이트가 시작될 때 해당 서버에 파일을 업로드하는 것을 무시하면 간과하기 쉬운 일반적인 실수입니다.
이 문제를 어떻게 해결합니까? 해당 이미지를 업로드하고 웹 페이지를 새로 고침하면 예상대로 파일이 즉시 표시됩니다. 서버에서 이미지를 삭제하고 다시 업로드 할 수도 있습니다. 이상하게 보일지 모르지만 우리는이 일을 한 번 이상 보았습니다. 때로는 파일이 손상되어이 "삭제 및 바꾸기"메소드가 도움이 될 수 있습니다.
이미지를 호스팅하는 웹 사이트가 다운 됨
일반적으로 사이트에서 자신의 서버에서 사용하는 이미지를 호스팅하려고하지만 경우에 따라 다른 위치에서 호스팅되는 이미지를 사용 중일 수 있습니다. 이미지를 호스팅하는 사이트가 다운되면 이미지도로드되지 않습니다.
전송 문제
이미지 파일이 외부 도메인에서로드 되든 자신의 도메인에서로드 되든, 브라우저가 처음 요청한 파일에는 전송 문제가있을 수 있습니다. 이는 일반적인 경우가 아니어야합니다 ( 새로운 호스팅 제공 업체를 찾아야 할 수도 있음). 그러나 때때로 발생할 수 있습니다.
이 문제의 불행한 측면은 통제가 불가능한 문제이므로 실제로 할 수있는 일이 없다는 것입니다. 좋은 소식은 일시적인 문제로 종종 신속하게 해결된다는 것입니다. 예를 들어, 누군가가 부러진 페이지를보고 그것을 새로 고치면 그만으로 문제가 수정되고 이미지가 제대로로드됩니다. 손상된 이미지가 표시되면 브라우저를 새로 고침하여 전송 문제 일 수 있는지 확인하십시오. 귀하의 초기 요청.
몇 몇 최종 노트
이미지 및 로딩 문제를 생각할 때 ALT 태그 와 웹 사이트 속도 및 전반적인 성능을 올바르게 사용 하는 것이 중요합니다.
ALT 또는 "alternate text"태그 는 이미지로드에 실패 할 경우 브라우저에 표시되는 태그 입니다. 또한 특정 장애를 가진 사람들이 이용할 수있는 웹 사이트를 만드는 데 중요한 구성 요소입니다. 사이트의 모든 인라인 이미지에는 적절한 ALT 태그가 있어야합니다. CSS로 적용된 이미지에는이 속성이 없습니다.
웹 사이트 성능, 너무 많은 이미지로드 또는 웹 게재에 적합하게 최적화 되지 않은 거대 이미지 만로드 속도에 부정적인 영향을줍니다. 이러한 이유로 사이트의 디자인에 사용하는 이미지의 영향을 테스트하고 해당 사이트의 성능을 향상시키는 데 필요한 조치를 수행하면서 웹 사이트 프로젝트에 적합한 전체 모양과 느낌을 만들어야합니다.