SRC가없는 이미지를 포함시키는 올바른 방법은 무엇입니까?

나중에 자바 스크립트로 src로 동적으로 채울 이미지가 있지만 쉽게 이미지 태그가 페이지로드에 존재하지만 아무것도 표시하지 않기를 원합니다. 나는 <img src='' />유효하지 않다는 것을 알고 있으므로 이것을 수행하는 가장 좋은 방법은 무엇입니까?

이미지의 소스를 생략하는 유효한 방법이 없지만, 거기에 있는 소스하는하지 않습니다 서버 안타 원인. 나는 최근에 iframes와 비슷한 문제가 있었고 //:0최선의 선택이라고 결정 했습니다. 아냐!

//(프로토콜 생략)으로 시작 하면 현재 페이지의 프로토콜이 사용되어 HTTPS 페이지에서 "안전하지 않은 내용"경고를 방지합니다. 호스트 이름을 건너 뛸 필요는 없지만 더 짧아집니다. 마지막으로 포트 :0는 서버 요청을 수행 할 수 없도록합니다 (사양에 따라 유효한 포트가 아님).

이것은 브라우저에서 서버 적중이나 오류 메시지를 발생시키지 않은 유일한 URL입니다. 일반적인 선택 — javascript:void(0)— HTTPS를 통해 제공되는 페이지에서 사용되는 경우 IE7에서 "안전하지 않은 내용"경고가 발생합니다. 유효하지 않은 주소라도 다른 포트로 인해 서버 연결이 시도되었습니다. (일부 브라우저는 단순히 잘못된 요청을하고 시간이 초과 될 때까지 기다립니다.)

이것은 Chrome, Safari 5, FF 3.6 및 IE 6/7/8에서 테스트되었지만 시도한 요청을 죽이는 네트워크 계층이기 때문에 모든 브라우저에서 작동 할 것으로 기대합니다.

다른 옵션은 빈 이미지를 포함시키는 것입니다. 목적에 맞는 모든 이미지가 수행되지만 다음 예제는 26 바이트 인 GIF를 http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever 에서 인코딩합니다 .

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

아래의 의견을 바탕으로 편집하십시오.

물론 브라우저 지원 요구 사항을 고려해야합니다. IE7 이하는 지원되지 않습니다. http://caniuse.com/datauri

요즘 빈 img src에 대한 가장 짧고 제정신이며 유효한 방법은 다음과 같습니다.

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

두 번째 예는 '대체 텍스트'(Chrome 및 IE의 깨진 이미지 아이콘)를 표시합니다.

"data:,"유효한 URI입니다. 빈 미디어 유형은 기본적으로 text/plain입니다. 따라서 빈 텍스트 파일을 나타내며"data:text/plain,"

동적으로 요소를 추가하는 것이 좋으며 jQuery 또는 다른 JavaScript 라이브러리를 사용하는 경우 매우 간단합니다.

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

또한보고 prepend와 append. 그렇지 않으면 이와 같은 이미지 태그가 있고 유효성을 검사하려는 경우 1px 투명 gif 또는 png와 같은 더미 이미지를 사용하는 것이 좋습니다.

나는 이것을 한동안하지 않았지만이 같은 일을 한 번 겪어야했다.

<img src="about:blank" alt="" />

내가 가장 좋아하는 것은- //:0포트 0 (tcpmux 포트?)에서 오리진 서버에 HTTP / HTTPS 연결을 시도한다는 것을 의미합니다. 아마도 무해하지만 어쨌든하지는 않을 것입니다. 브라우저는 포트 0을보고 요청을 보내지 않을 수도 있습니다. 그러나 나는 그것이 아마도 당신이 의미하는 것이 아닐 때 그렇게 지정되지는 않을 것입니다.

어쨌든 렌더링 about:blank은 실제로 테스트 한 모든 브라우저에서 매우 빠릅니다. 방금 W3C 유효성 검사기에 던졌지 만 불평하지 않았으므로 유효 할 수도 있습니다.

편집 :하지 마십시오; 모든 브라우저에서 작동하지는 않습니다 (이 답변에 대한 의견에서 지적한대로 '깨진 이미지'아이콘이 표시됩니다). <img src='data:...아래 솔루션을 사용하십시오 . 또는 유효성에 신경 쓰지 않고 여전히 서버에 불필요한 요청을 피하려면 <img alt="" />src 속성을 사용하지 않아도됩니다. 그러나 그것은 잘못된 HTML이므로 신중하게 선택하십시오.

http://desk.nu/blank_image.php- 다양한 방법을 보여주는 테스트 페이지 : 모든 종류의 문서 유형 및 내용 유형과 함께 제공 -아래 의견에서 언급 한대로 Mark Ormston의 새 테스트 페이지를 사용하십시오. http://memso.com/Test/BlankImage.html

주석으로 작성된 바와 같이,이 방법은 잘못되었습니다.

이전에는이 ​​답변을 찾지 못했지만 W3 사양에 따르면 유효한 빈 src태그는 앵커 링크 #입니다.

예 : src="#",src="#empty"

페이지가 성공적으로 확인되고 추가 요청이 없습니다.

src를 빈 문자열로 설정하고 CSS에 규칙을 추가하여 깨진 이미지 아이콘을 숨기는 것은 잘 작동한다는 것을 알았습니다.

[src=''] {
    visibility: hidden;
}

src 속성을 유지하면 빈 브라우저는 현재 페이지 URL로 요청을 보냅니다 .URL을 원하지 않으면 항상 src 속성에 1 * 1 투명 img를 추가하십시오

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

나는 다음을 사용하여 그것을 발견했다.

<img src="file://null">

요청하지 않고 올바르게 확인합니다.

브라우저는 단순히 로컬 파일 시스템에 대한 액세스를 차단합니다.

그러나 Chrome의 콘솔 로그에 다음과 같은 오류가 표시 될 수 있습니다.

Not allowed to load local resource: file://null/

이 기사를 기반으로 진정으로 빈 유효하고 호환성이 높은 SVG를 사용 하십시오 .

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

SVG와 마찬가지로 크기는 300x150px로 기본 설정되지만 img실제 구현에서는 어쨌든 필요할 수 있으므로 요소 기본 스타일로 작업 할 수 있습니다.

Ben Blank의 대답을 바탕으로 w3 유효성 검사기에서 유효성을 검사하는 유일한 방법은 다음과 같습니다.

<img src="/./.:0" alt="">`

개인적으로 about:blank src및 img요소 의 불투명도를로 설정하여 깨진 이미지 아이콘을 처리합니다 0.

<img src="invis.gif" />

여기서 invis.gif는 단일 픽셀 투명 gif입니다. 이것은 향후 브라우저 버전에서 중단되지 않으며 90 년대 이후 레거시 브라우저에서 작동했습니다.

png도 작동해야하지만 테스트에서 gif는 43 바이트이고 png는 167 바이트이므로 gif는 이겼습니다.

ps는 alt 태그를 잊지 말고 유효성 검사기를 좋아합니다.

간단히 말하면 다음과 같습니다.

<img id="give_me_src"/>