base64로 이미지 소스를 설정하는 방법

95

이미지 소스를 base64 소스로 설정하고 싶지만 작동하지 않습니다.

<img id="img" src="" />

자바 스크립트

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="

javascript base64

— Poppel
소스

9

base64 문자열에서 줄 바꿈을 제거하면 작동합니다. Fiddle이 업데이트되었습니다.

— Adriano Repetti 2013 년

138

setAttribute대신 사용해보십시오 .

document.getElementById('img')
    .setAttribute(
        'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    );

진짜 대답 : (그리고 base64에서 줄 바꿈을 제거했는지 확인하십시오.)

— 케빈 바우처
소스

thx, 10 분 후에 수락하겠습니다. 왜 setAttribute가 더 나은가요?

— poppel

@poppel 나는 그것이 중요하다고 생각하지 않지만 바이올린을 고치기위한 첫 번째 시도는 setAttribute. 실패한 후 base64 인코딩에서 줄 바꿈을 발견했습니다. (답변을 서둘러 제출했기 때문에 src=줄 바꿈을 수정 한 후 시도하지 않았습니다 .)

— Kevin Boucher 2013 년

26

jQuery를 사용하여 Base64에서 이미지를 설정하려는 경우 :

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

— 파리스 자치 나
소스

5

@TruthSerum 우리는 React 스택으로 전환했기 때문에 사용하지 않습니다. 하지만 재미로 자신의 주장을 증명할 통계적 증거가 있습니까? 정말로 jQuery를 사용하는 레거시 웹 앱이 없다고 생각하십니까? 귀하의 의견은 귀하의 개인적인 의견에 근거한 것이며 제 개인적인 시간 낭비입니다. 또한 프로젝트를 확인하면 여전히 유지되고 있으며 거대한 팔로워 기반을 가지고 있습니다. github.com/jquery/jquery/commits/master

— Faris Zacina 2016-04-25

5

또한 @TruthSerum 여기에 몇 가지 통계가 있습니다. 댓글을 게시하기 전에 확인할 기회가 없었기 때문입니다. google.com/trends/...

— 패리스 Zacina을

요즈음, propattr 은 DOM 업데이트 대신 사용되어야합니다 . attr로드시 원래 페이지 상태를 나타냅니다.

— AntonChanning

6

img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"

— 자르트
소스

4

문제는 CR (캐리지 리턴)입니다.

http://jsfiddle.net/NT9KB/210/

당신이 사용할 수있는:

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

— Matías Damonte
소스

정확히 여기서 해결책은 무엇입니까?

— AHH

여기에이 솔루션은베이스 (64)에서 줄 바꿈 (캐리지 리턴)을 제거하는 것입니다

— 케빈 바우처