Dart lang의 사용자 정의 요소에 이미지 추가

Question

머티리얼 디자인에서와 같이 fab 아이콘 사용자 정의 요소를 만들고 있지만 이미지 (아이콘 이미지)를 추가하려고하지만 만들 수 없습니다. 나는 또한 2를 사용하여 시도

으로 ButtonElement로하려면 .src 추가

을 ImageElement하는 shado.host

추가하려면 .src에 .SRC 추가

1. :
   나는 3 approachs 시도 이미지 유형
   1. PNG
   2. SVG

   내 코드는 다음과 같습니다 :하지만

   part of fonix_client_library; 
   
   @init() 
   upgradeFonixFab() => 
       document.registerElement(FonixFab.tag, FonixFab); 
   
   
   class FonixFab extends HtmlElement { 
   static final tag = 'fonix-fab'; 
   ShadowRoot shadow; 
   
   ButtonElement innerButton; 
   ImageElement innerImage; 
   
   factory FonixFab() => (new Element.tag(tag) as FonixFab); 
   
   FonixFab.created() : super.created() { 
   
   shadow = this.createShadowRoot(); 
   
   shadow.host 
   // ..style.src='ic_create_24px.svg' <- did not work 
   // ..style.src='ic_create_24px.png' <- did not work 
       ..style.display='inline-block' 
       ..style.position = 'fixed' 
       ..style.right='15px' 
       ..style.bottom='15px' 
       ..style.outline='none' 
       ..style.userSelect = 'none' 
       ..style.cursor='pointer' 
       ..style.zIndex='1' 
       ..style.boxSizing = 'border-box' 
       ..style.width='26px' 
       ..style.height='26px' 
       ..style.background = '#d23f31' 
       ..style.color='#fff' 
       ..style.borderRadius='50%' 
       ..style.paddingTop='2px' 
       ..style.paddingLeft='1px' 
       ; 
   
   innerImage = new ImageElement() 
       ..style.src='ic_create_24px.svg'; // <- did not work 
   
   innerButton = new ButtonElement() 
   // ..style.src='ic_create_24px.svg' <- did not work 
   // ..style.src='ic_create_24px.png' <- did not work 
       ..text="+"      // <- This is fine for using +, but I need to use image instead 
       ..style.cursor='pointer' 
       ..style.color= 'white' 
       ..style.border="0px" 
       ..style.background='#d23f31' 
       ..style.borderRadius='5px'; 
   
   
       shadow.nodes.add(innerButton); OR shadow.nodes.add(innerImages); 
   

   }

   @override 
   void attached() { 
       super.attached(); 
   
       shadow.host.onMouseDown.listen((e){ 
       shadow.host..style.color="#333" 
       ..style.background=themeColor; //'#FF8F66'; 
       }); 
       shadow.host.onMouseUp.listen((e){ 
       shadow.host..style.color=themeColor 
       ..style.background='#ffd9cc' 
       ..style.outline='none'; // remove the focus outline/glur 
       }); 
       shadow.host.onMouseEnter.listen((e)=> shadow.host..style.boxShadow='0px 0px 5px #888888'); 
       shadow.host.onMouseLeave.listen((e)=> shadow.host..style.boxShadow='0px 0px 0px'); 
   } 
   
   Remove(){ 
   this.remove(); 
   } 
   } 
   

   어떤?

Answer 1

당신은 이미지 태그를 추가하고 거기에 src 속성 내가 ImageElement를 사용하여 시도 <img src="xxx.png">