Preview image for plugin/widget is not displayed?

[Christof_Strack]

Hi,

I created a github repository for a plugin which loads as a widget in the cockpit.
Loading and running this widget works.
I wonder why my preview image is not loaded?
Although I added the copy entry to package.json

package.json
...
      "copy": [
        {
          "from": "widget/raise-alarm-preview.png",
          "to": "c8y-widget-preview-img/raise-alarm-preview.png"
        }
      ]
...

and reference this png in the module:

...
raise-alarm-plugin.module.ts
  providers: [
    {
      provide: HOOK_COMPONENTS,
      multi: true,
      useValue: [
        {
          id: 'raise-alarm.widget.plugin',
          label: gettext('Raise alarm widget plugin'),
          description: 'Raise alarm widget plugin',
          component: RaiseAlarmPluginComponent,
          previewImage: 'c8y-widget-preview-img/raise-alarm-preview.png',
          configComponent: RaiseAlarmPluginConfig
        }
      ] as DynamicComponentDefinition[]
    }
  ]
...

What I see in the preview is the following:

So it seems it can’t find the png.
What am I doing wrong?

Regards Christof

[Tristan_Bastian]

Hi Christof,

By specifying:

previewImage: 'c8y-widget-preview-img/raise-alarm-preview.png'

The image will be loaded from your shell application, but as the image is not part of your shell application, it can’t be loaded. You need to load it from your package. You could achieve this by setting the previewImage to something like:

previewImage: '/apps/<package-contextPath>/c8y-widget-preview-img/raise-alarm-preview.png'

The 10.17 tutorial app should also contain a better sample for achieving this, without the copy plugin and without specifying a path here. This might also work for 1016 already.

Regards,
Tristan