[google-chrome] Chrome에서 리소스를로드하지 못했습니다.

카비르의 해결책은 맞습니다. 내 이미지 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과 관련이있을 수 있습니다. 이미지 파일을 끄거나 이름을 바꾸십시오.

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

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

답변

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

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