Programming

Chrome에서 리소스를로드하지 못했습니다.

procodes 2020. 5. 16. 11:23
반응형

Chrome에서 리소스를로드하지 못했습니다.


웹 페이지에는 많은 이미지가 있습니다.

다른 브라우저에서 올바르게 다운로드하고 있지만 Chrome에서로드하지 않습니다.

개발자 콘솔에는 각 이미지에 대해 다음 메시지가 표시됩니다.

리소스를로드하지 못했습니다

이 문제는 Chrome에서만 나타납니다.

무엇입니까?


최근에이 문제가 발생하여 "Adblock"확장명으로 인한 것임을 알았습니다 (제 이름은 파일 이름에 "banner"및 "ad"라는 단어가 있기 때문입니다).

문제가 있는지 빠른 테스트로 확장 프로그램을 사용 중지 ( ctrl+ shift+n ) 한 상태로 시크릿 모드에서 Chrome을 시작 하고 페이지가 작동하는지 확인하세요. 을 통해 실행하도록 특별히 설정하지 않으면 기본적으로 모든 확장 프로그램이 시크릿 모드에서 이미 사용 중지되어 있습니다 chrome://extensions.


네트워크 탭에서 Chrome이 리소스 파일을 다운로드하지 못한 지 확인하십시오.


누군가에게 도움이되는 경우 이와 똑같은 문제가 발생하여 "Do Not Track Plus"Chrome 확장 프로그램 (버전 2.0.8)으로 인한 것으로 나타났습니다. 해당 확장을 비활성화하면 이미지가 오류없이로드되었습니다.


네트워크 리소스에 대한 캐시를 끄는 옵션도 있습니다. 이것은 환경 개발에 가장 적합 할 수 있습니다.

  1. 크롬을 마우스 오른쪽 버튼으로 클릭
  2. '요소 검사'로 이동
  3. 상단의 '네트워크'탭을 찾으십시오. 클릭하세요.
  4. '캐시 비활성화'확인란을 선택하십시오.

카비르의 해결책은 맞습니다. 내 이미지 URL

/images/ads/homepage/small-banners01.png, 

그리고 이것은 AdBlock을 넘어 뜨리고있었습니다. 이것은 도메인 간 문제가 아니었고 localhost와 웹 모두에서 실패했습니다.

Chrome의 네트워크 탭을 사용하여로드하지 못한 특정 이미지에 대해 매우 혼란스러운 결과를 디버깅하고 발견했습니다. 첫 번째 요청은 응답이 없습니다 (상태 "(pending)"). 나중에 줄에 원래 URL을 나열한 다음 요청자로 "리디렉션"하는 두 번째 요청이있었습니다. 리디렉션 요청 헤더는 모두 base64로 인코딩 된 데이터의 동일한 짧은 줄에 대한 것이며 상태는 "성공"이지만 응답이 없습니다.

GET      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1

나중에이 인라인 스타일이 모든 이미지 요소에 추가되었음을 알았습니다.

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

마지막으로 콘솔에서 "자원을로드하지 못했습니다"라는 메시지를받지 못했습니다.

Port error: Could not establish connection. Receiving end does not exist.

이러한 일이 발생하면 AdBlock과 관련이있을 수 있습니다. 이미지 파일을 끄거나 이름을 바꿉니다.

또한 AdBlock에서 만든 인라인 CSS로 인해 프로모션 슬라이더의 레이아웃이 중단되었습니다. Kabir의 솔루션을 찾기 전에 CSS의 레이아웃 문제를 해결할 수 있었지만 CSS는 다소 불필요하며 여러 크기의 이미지를 처리하는 슬라이더의 유연성에 영향을 미쳤습니다.

나는 교훈은 다음과 같다고 생각한다. 이 이미지는 방문자에게 눈에 잘 띄지 않는 방식으로 현재 프로모션 및 스페셜을 방문자에게 알리는 것만 큼 악의적이거나 성가신 것이 아닙니다.


ASP를 통해 이미지가 생성되는 경우 Response.Write()호출하지 마십시오 Response.Close();. 크롬은 그것을 좋아하지 않습니다.


Chrome (마지막 버전 24.0.1312.57 m)에서만 이미지가 html img보다 큰 경우에만이 오류가 발생했습니다. PHP 스크립트를 사용하여 다음과 같이 이미지를 출력했습니다.

header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);

이미지의 길이에 1을 추가하여 해결했습니다.

header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);

Chrome이 올바른 바이트 수를 기대하지 않는 것 같습니다.

Chrome 및 IE 9에서 성공적으로 테스트되었습니다.이 도움이 되길 바랍니다.


Chrome (Windows 용) 37+의 Reenable (임시) showModalDialog 지원에서 임시 해결 방법이 있습니다 .

기본적으로 레지스트리에서 새 문자열을 만듭니다.

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

EnableDeprecatedWebPlatformFeatures 키 아래에서 이름 1값으로 문자열 값을 만듭니다 ShowModalDialog_EffectiveUntil20150430. 정책이 활성화되어 있는지 확인하려면 chrome://policyURL을 방문하십시오 .


FYI - I had this issue as well and it turned out that my html listed the .jpg file with a .JPG in caps, but the file itself was lowercase .jpg. That rendered fine locally and using Codekit, but when it was pushed to the web it wouldn't load. Simply changing the file names to have a lowercase .jpg extension to match the html did the trick.


Facts:


In Chrome (Canary) I unchecked "Appspector" extension. That cleared the error. enter image description here


I updated my Chrome browser to the latest version and the issue was fixed.

참고URL : https://stackoverflow.com/questions/4390134/failed-to-load-resource-under-chrome

반응형