Imgur 이미지 깨짐

나를 미치게 만드는 문제가 하나 있습니다.

문제: imgur에 호스팅된 이미지가 자주 깨집니다.

예:

CTRL-F5로 페이지를 새로고침하면 이미지가 표시되긴 하지만, 이 문제가 많은 주제에서 발생하고 있어 이 우회 방법은 정말로 용인하기 어렵습니다.

2019년 9월 초에 dslreports.com의 이미지와 FF69.0 (Windows)에서 처음 관찰되었습니다.
현재 FF 76.0.1과 Discourse 2.5.0.beta4에서도 여전히 문제가 지속되고 있습니다.

다른 사용자의 관찰 사항

  • macOS 10.12.6에서 FF 69.0으로 확인…
    • 보고된 대로 일반적인 페이지 로드 시 이미지가 누락됩니다.
    • Cmd-Shift-R (Shift 키를 누른 채 새로고침)을 하면 이미지가 표시됩니다.
    • Cmd-R (일반적인 새로고침) - 다시 이미지가 표시되지 않습니다.
  • Chrome Version 77.0.3865.75: 동일한 동작
    • Cmd-R - 이미지가 없습니다.
    • Cmd-Shift-R - 이미지가 있습니다.
  • Safari Version 12.1.2 (12607.3.10) - 항상 이미지를 표시합니다

예시 주제

이 문제를 일으킬 수 있는 원인과 해결 방법에 대한 힌트가 있을까요?

여기서 이미지가 정상적으로 게시되나요? 같은 이미지 링크를 여기 댓글에 입력해 보세요.

좋은 생각입니다!

Imgur

이미지 링크:
Imgur

직접 링크:

마크다운 링크:
Imgur

BBCode

링크된 BBcode → 작동하지 않음!

지금 내가 보는 화면입니다 (아직 CTRL-F5를 누르지 않았습니다):

CTRL-F5 누른 후 → 모든 이미지가 보입니다.

파이어폭스와 크롬에서는 uBlock Origin을 활성화했든 안 했든 상관없이 잘 작동합니다.

해당 브라우저의 개인 설정에서 원인이 나오는 것 아닌가요? (일부 추가 기능은 외부 도메인의 이미지에 대해 매우 민감할 수 있습니다)

평소에 사용하지 않는 다른 웹 브라우저를 사용해 보세요. 이렇게 하면 로컬 브라우저 커스터마이징에 의한 문제를 배제할 수 있습니다.

그렇게 해도 문제가 해결되지 않으면, 와이파이를 끄고 휴대폰으로 시도해 보세요. 이렇게 하면 로컬 네트워크 문제를 배제할 수 있습니다.

주말 동안 다른 사용자들로부터도 데이터를 수집해서 결과를 보고하겠습니다.

죄송합니다. 이 주제로 돌아오는 데 시간이 조금 걸렸습니다.

오늘 흥미로운 관찰 결과:

테스트 토픽: Broken imgur images (for testing only) - Site Feedback and Other Questions - OpenWrt Forum

Firefox

  • 새로 연 FF, 로그인하지 않은 상태로 테스트 토픽 방문: 첫 번째 게시물의 모든 이미지가 정상 작동
  • 새로 연 FF, 로그인한 상태로 테스트 토픽 방문: 첫 번째 게시물의 마지막 이미지가 정상 작동하지 않음

Chrome

  • 새로 연 Chrome, 로그인하지 않은 상태로 테스트 토픽 방문: 첫 번째 게시물의 마지막 이미지가 정상 작동하지 않음
  • 새로 연 Chrome, 로그인한 상태로 테스트 토픽 방문: 첫 번째 게시물의 마지막 이미지가 정상 작동하지 않음

이 결과는 재현 가능합니다.

수정: 위 결과는 유선 인터넷 연결을 통한 것입니다. 연결 문제임을 배제하기 위해 모바일 폰 테더링으로 교차 확인해 보았지만: 결과는 동일했습니다.

보시는 바와 같이, FF의 경우 로그인 여부에 따라 차이가 있지만, Chrome은 로그인 여부와 관계없이 어떤 경우에도 마지막 이미지를 표시하지 않습니다.

근본 원인

링크된 BBcode → 작동하지 않음!
[url=https://imgur.com/6UadCq3]![](upload://oAe4ec2Wl59ohJsE3L6nlRdabPS.jpeg)[/url]

링크된 BBcode → 작동함!
[url=https://imgur.com/6UadCq3][img]https://i.imgur.com/6UadCq3.jpg[/img][/url]

imgur가 이미지 링크에서 's’를 생략하는 이유가 있을까요?

이 문제를 확인할 수 없는 분들을 위해:

HTTPS 없이 그 BBCode를 어디서 가져오셨나요?

어쨌든 몇 가지 팁을 드리겠습니다:

  • download remote images to local 설정을 활성화하고 disabled image download domains 설정에서 imgur를 제거하면 모든 이미지를 로컬에 호스팅하여 이런 일이 다시 발생하지 않도록 할 수 있습니다.

  • 이 포럼을 호스팅하는 곳이 어디인지 정확히 알 수는 없지만, 분명히 우리의 Discourse 공식 표준 설치 가이드를 따르지 않고 있습니다. 그 때문에 HTTP/2가 활성화되지 않아 모든 사용자에게 사이트 속도가 느리게 느껴집니다.

imgur 웹사이트에서 구했습니다.

@thess Rafael이 언급한 다른 두 가지 사항에 대해 코멘트해 주실 수 있나요?

아, 그러면 자신의 이미지를 볼 때 Imgur이 생성하는 BBCode이고, 'Linked Format’을 사용하는 경우군요.

그것은 Imgur이 관리하는 부분이라 우리가 할 수 있는 일이 없습니다. 또한 HTTP 콘텐츠에 대해서는 미디어를 로컬로 다운로드하여 서빙하는 우회 방법이 이미 마련되어 있습니다. 우리가 더 할 수 있는 일은 없습니다.

절대적으로 필요한 경우가 아니라면 이미지를 로컬에 호스팅하지 않는 것이 좋습니다.

사이트는 DigitalOcean에서 호스팅되고 있습니다. 2016년에 당시 사용 가능한 도구로 Debian 8에서 설치를 진행했습니다. 그리고… AFAIK로 HTTP/2는 항상 활성화되어 있었습니다.

실제로 그렇게 할 필요는 없습니다. 대부분의 사용자는 필요한 경우 대부분 편집기에 이미지를 복사해서 붙여넣을 것입니다. ++로 영역을 선택한 뒤 +로 편집기에 붙여넣으면 됩니다.

또한 imgur에서 이미지를 복사하거나 해당 URL을 복사하는 것도 문제없이 작동합니다. 이 보고서는 단순한 경계 사례(corner case)에 불과합니다.

모든 게시물의 문자열 교체 기능을 사용하여 기존 http imgur 링크를 모두 수정할 수도 있습니다.

Discourse는 Docker 컨테이너에 설치되며, nginx 업데이트를 제공하므로 호스트 OS에 대한 지원이 필요하지 않습니다. 수동으로 리버스 프록시를 구성한 커스텀 설치를 하지 않았다면, 최신 버전의 Discourse만 사용해도 HTTP2가 기본적으로 활성화되어 있어야 합니다.

발견해 본 바로는 imgur만이 영향을 받는 것이 아닙니다.

또한 영향을 받는 사이트(스크린샷은 Broken imgur images (for testing only) - #4 by tmomas - Site Feedback and Other Questions - OpenWrt Forum 참고):

  • dropbox (https 링크, 예: https://www.dropbox.com/sh/ew0gap0crn30wyk/AACTBNd_oQF4pMzviYqDDtlYa/owrt1907-r11104-e752fc1ff9-20200605?dl=0)

    이 Discourse 포럼에서 일반 링크로: Dropbox

    원박스(onebox)로

문제를 볼 수 없는 경우를 대비한 스크린샷:



링크를 찾을 수 없음이라는 메시지는 제가 OpenWrt 포럼에서 CTRL-F5를 눌렀을 때 보는 것과 모순됩니다(그때는 이미지 링크가 작동하며 "찾을 수 없음"이 표시되지 않음)

imgur에 대한 이 문제를 수정하는 것은 상대적으로 간단해 보이지만, 상당한 노력이 필요하며, 작동하지 않는 새로운 링크가 계속 들어오므로 이러한 노력이 정기적으로 이루어져야 합니다.

@Falco dropbox 링크가 discourse 포럼에서도 작동하지 않는 것 같습니다: 위에서 조언한 대로 이미지를 로컬로 호스팅하나요?

원박싱(oneboxing)이 작동하지 않는 비-imgur 사이트의 또 다른 예시입니다:

https://www.kuketz-blog.de/openwrt-update-benachrichtigung-fuer-packages/

네, 이미지를 로컬로 다운로드합니다. 이는 Discourse의 기본 동작입니다.

제3자 링크를 게시하면 결국 깨진 이미지로 이어지기 때문에, Discourse는 초기부터 이 기능을 내장하고 있습니다. 물론 트레이드오프가 있습니다. 이미지를 위한 공간을 로컬에서 제공하거나 Object Storage 서비스를 사용하여 제공해야 합니다.

이렇게 끈질기게 물어봐서 죄송하지만, 혼란스럽고 문제를 제대로 이해하지 못한 것 같습니다.

제가 혼란을 느끼는 부분은 다음과 같습니다:

이 게시글을 작성하면서 링크를 추가하는 동안

https://www.kuketz-blog.de/openwrt-update-benachrichtigung-fuer-packages/

미리보기 영역에서 깨진 이미지를 보고 있습니다:


— 스크린샷 시작 —


— 스크린샷 끝 —


그러나 이 게시글을 작성하는 시점에, 이전 게시글에서는 동일한 링크가 올바른 이미지와 함께 표시되고 있습니다:


— 스크린샷 시작 —


— 스크린샷 끝 —


이미지가 말씀하신 대로 로컬에 저장되어 있음에도 불구하고, 왜 discourse 포럼에서 이 문제를 보고 있는지 이해가 되지 않습니다.

즉, 깨진 브라우저 확장 기능이 설치되어 있다는 뜻입니다. 모든 확장 기능을 제거한 후 다시 시도해 볼 수 있나요?