이미지 파일을 사용하여 goog.ui.Button의 인스턴스 만들기

Question

저는 Google Closure 라이브러리가 새로 도입되었으며 현재 장애물로 이미지 대신 프로그래밍 방식으로 텍스트를 렌더링하는 버튼이 생깁니다. img 태그를 버튼의 콘텐츠로 추가하려고 시도했습니다.

var image = goog.dom.createDom('img', { 'src' : 'foo.png' }); 
var button = new goog.ui.Button(image); 

그러나 페이지에 아무 것도 표시되지 않지만 이미지는 표시되지 않습니다. 생성 된 HTML을 검사하면 내용이없는 버튼 태그가 표시됩니다.

background-image을 지정하는 스타일 속성을 추가하는 것도 고려해 보았습니다. 그러나 Button API를 통해이를 수행하는 방법은 분명하지 않습니다.

이 작업을 수행하는 방법에 대한 의견이나 예는 무엇입니까? 도움을 감사하십시오.

편집 :

var image = goog.dom.createDom('img', { 'src' : '/images/foo.png' }); 
var button = new goog.ui.CustomButton(image); 

이 버튼이 작동하지 않습니다 구체적으로 이유를 잘 모르겠어요 :

var button = new goog.ui.CustomButton(); 
button.render(goog.dom.getElement('button-row')); 
var style = button.getElement().style; 
style.backgroundImage = 'url(foo.png)'; 
style.backgroundPosition = 'center center'; 
style.backgroundRepeat = 'no-repeat'; 

Answer 1

CustomButton가 작동하는 것 같다 : 여기 데이브 Paroulek의 도움에 도착 솔루션입니다 Button이 <button>을 렌더링하고 CustomButton이 버튼처럼 보이도록 스타일이 지정된 여러 개의 <div> 요소를 렌더링한다는 사실에 주목했습니다. 당신은 배경 이미지를 사용하려면

또한, 당신이 시도 할 수 있습니다 :

var div = goog.dom.createDom('div', { 'class' : 'icon goog-inline-block' }); 
span = goog.dom.createDom('span', { 'style': 'vertical-align:middle'}, 
           'Button with css image'); 

button = new goog.ui.CustomButton([div, span]); 
var btn2 = goog.dom.$('button2'); 
button.render(btn2); 

를 그런 다음, 다음과 같이 CSS를 추가

.icon { 
    height: 16px; 
    width: 16px; 
    margin: 0 1px; 
    background-image: url(/images/foo.png); 
    background-repeat: no-repeat; 
    vertical-align: middle; 
}