Setting the icon on my Panel with local resources

Hi Michel,

Is the public folder placed at the root of your extension package? Could you provide an image of your directory structure?

Hi @Michel L, thank you for your question. Since this pertains to our Developer Platform and Extension API, I’ve moved your post to our Lucid for Developers Community space.

To begin with troubleshooting, can you please confirm if the mylogo.png file is publicly accessible by navigating to http://<your-public-server-address>/public/mylogo.png directly in your browser?

Thanks Connor and Richard.

Here is the snapshot of my directory structure.

Here is the try to navigate without success.

I’m working in local debbuging using :

npx lucid-package test-editor-extension visual-lucidchart-dump-extension.

Here is how the panel appears:

Thanks for your help.

Yes i works with that code

class DebugPanel extends Panel {
  private viewport = new Viewport(this.client);
  constructor(client: EditorClient) {
    super(client, {
      title: 'My Panel',
      //          content: 'Hello from a panel',
      iconUrl: 'http://localhost:9900/resources/LucidSoftwareFavicon.png',
      location: PanelLocation.RightDock,
      url: 'debug.html',
    });
  }

But when I will publish idoes the iconUrl must be modified?

Hi Michel. Unfortunately, the iconUrl would have to be modified in order to see the image after publishing. After I looked into this more, it looks like we have a bug using relative urls and the iconUrl field, so I don’t think it is possible (right now) to use the public folder to host images for your panel. I would recommend instead uploading your images to google drive, and then reference the URL that is used from google to host the picture.

Thanks.

Could we use lucidchart cdn (https://cdn-cashy-static-assets.lucidchart.com) to store our images?

Hi @Michel L , jumping in here while Connor is out of office. Our CDN is not set up to support storing custom images for extensions. However, you can use other reliable hosting solutions such as Google Drive to host your images and then reference those URLs in your extension.