Icon React Display bug + image bug display

[Yenzago]

Describe the bug

Hello i try to input an logo and icon but i don't know why it doesn't display it. I put my logo in the root of my app.
For the logo i use:

- id: logo
            type: Html
            properties:
              html: '<div style="background: #fff; text-align: center; padding: 10px"> <img src="/home/eyang/serviceguard/sigle-fivenines (1).jpg" height="80px" width="80px"/></div>'
            style:
              marginLeft: "10px"
            layout: 
              flex: 0 1 auto

and for the icon i use button type with no title :
- id: first_button
            type: Button
            properties:
              hideTitle: true
              variant: "contained"
              type: "primary"
              size: "large"
              icon: "AiFillAppstore"
            layout: 
              flex: 0 1 auto

Do you have a solution ? thanks for help

To Reproduce

Screenshots

Lowdefy Version

i use lowdefy version: 4.0.0-alpha.37

[Gervwyk]

Hi
You can put it in the ./public folder and then change.

id: logo
type: Html
properties:
  html: '<div style="background: #fff; text-align: center; padding: 10px"> <img src="/sigle-fivenines (1).jpg" height="80px" width="80px"/></div>'
style:
  marginLeft: "10px"
layout: 
  flex: 0 1 auto

All files in the public folder are served under the url root, and you can nest files using folders. See https://docs.lowdefy.com/hosting-files

[Yenzago]

i put it in the .lowdefy/dev/public and still nothing. do i have to create a /public folder ?

[Gervwyk]

Yes. Create a /public folder next to your lowdefy.yaml

[Yenzago]

Still got nothing i create /public at the root of the page right ?

[Yenzago]

And do you have an idea for the icon that display only a alert icon or error icon please ?

[Yenzago]

i try in ico and jpg nothing works

but when i put a favicon i have the good image

[Gervwyk]

On the Img block width and height here is a property, the style with and height are applied to die layout box.
See https://docs.lowdefy.com/Img

[Yenzago]

Thank you very much for the help.

i have a last question concerning mobilemenu how to display it on the left of the page
like by default it is display on the right side as the image

[Gervwyk]

So this would need to be added to the MobileMenu block as a property, since it is currently not supported. However, this can be fixed in one of two ways, both requiring some coding experience:

1. Best, slower approach, build the property into the MobileMenu block code and make a PR to the lowdefy repo to be included in next version release.
2. Good, faster, make a custom plugin for a mobile menu block that works exactly like you'd like.

[Yenzago]

Oh okay, i'm a beginner so i can search may be the easier way to do that

• id: left_column
  type: Box
  properties:
  style:
  placement: "left"
  layout:

      span: 3
      contentGutter: 6
    blocks:
      - id: block_id
        type: MobileMenu
        properties:
          selectedKeys: []
          links:
            - id: all_tickets_open
              type: MenuLink
              pageId: tickets
              properties:
                title: All open tickets
            - id: all_open_best_effort
              type: MenuLink
              pageId: tickets
              properties:
                title: All open best effort tickets
            - id: all_my_tickets
              type: MenuLink
              pageId: tickets
              properties:
                title: All my tickets
            - id: all_tickets
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets
            - id: all_tickets_Crowdstrike
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets (Crowdstrike)
            - id: all_tickets_Trendmicro
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets (Trendmicro)
            - id: all_tickets_Cybereason
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets (Cybereason)
            - id: all_tickets_Cortex
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets (Cortex)
            - id: all_tickets_Resolved
              type: MenuLink
              pageId: tickets
              properties:
                title: All tickets (Resolved)
            - id: autres
              type: MenuGroup
              pageId: tickets
              properties:
                title: Autres
                icon: AiOutlineLayout
              links: 
                - id: all_canceled_tickets
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All canceled tickets
                - id: tickets_by_customer
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: Tickets by customer
                - id: intelcia_tickets_open
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: Tickets Intelcia open
                - id: five9s
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: five9s
                - id: all_sfr_tickets
                  type: MenuLink
                  pageId: tickets
                  properties:
                    title: All SFR tickets
            - id: manage_queue
              type: MenuLink
              pageId: tickets
              properties:
                icon : AiFillSetting
                title: manage the queue 
            - id: give_opinion
              type: MenuLink
              pageId: tickets
              properties:
                icon : AiFillStar
                title: give your opinion
          toggleMenuButton:
            icon: AiFillCaretRight
  

  I already put in a specific block

[Gervwyk]

you want this in a drawer when you click a button on mobile? Please just make a seperate discussion for this, then I thnk I'll be able to give you some config that does it using Drawer and Button blocks.

[Yenzago]

Let's talk here for the mobile Menu so ?

[Yenzago]

WHeb i cliked on the button triangle i want to display my menu on the left with all the possibilities