добавление изображения к пользовательскому элементу в Dart lang

Я делаю потрясающий пользовательский элемент значка, например, в дизайне материалов, и хочу добавить изображение (изображение значка), но не смог.

Я пробовал 3 подхода:

  1. Добавление .src в shado.host
  2. Добавление .src в ImageElement
  3. Добавление .src в ButtonElement

Я также пытался использовать 2 типа изображений

  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();
 } 
}

хоть какой?


person Hasan A Yousef    schedule 10.11.2014    source источник


Ответы (1)


Вам нужно добавить тег изображения и установить там атрибут src <img src="xxx.png">

person Günter Zöchbauer    schedule 10.11.2014
comment
То же самое только императивно. Я пропустил это в вашем коде. Установите атрибут src в ImageElement, затем - person Günter Zöchbauer; 10.11.2014
comment
Пробовал, но не приходило, разве что если я неправильно написал в приведенном выше коде. - person Hasan A Yousef; 10.11.2014
comment
Неважно, как вы это сделаете, конечным результатом должен быть тег <image src="somefile.xxx"> в вашем HTML для отображения изображения (конечно, есть и другие способы, такие как использование фона CSS или SVG). - person Günter Zöchbauer; 10.11.2014
comment
Никаких ошибок, просто ничего не появляется, я изменил ..style.src только на ..src, и появился значок сломанного изображения - person Hasan A Yousef; 10.11.2014
comment
Это указывает на то, что путь к вашему изображению неверен. - person Günter Zöchbauer; 10.11.2014
comment
Спасибо @Gunter, просто заметил, что DART по умолчанию читает изображение из папки «web», поэтому, даже имея изображение в той же папке файла, мне нужно использовать полный путь в .src - person Hasan A Yousef; 10.11.2014
comment
Путь указан относительно страницы входа. Если у вас есть index.html (или как вы его назвали) в другом каталоге (example/index.html или web/admin/index.html), этот каталог является отправной точкой. - person Günter Zöchbauer; 10.11.2014
comment
Спасибо за подробное объяснение :) глубоко признателен. - person Hasan A Yousef; 10.11.2014