# Preview image for plugin/widget is not displayed?

**URL:** <https://community.cumulocity.com/t/preview-image-for-plugin-widget-is-not-displayed/1320>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [June 12, 2023, 12:20pm UTC](https://community.cumulocity.com/t/preview-image-for-plugin-widget-is-not-displayed/1320 "2023-06-12T12:20:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christof\_Strack](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christof_strack/32/30066_2.png) [@Christof\_Strack](https://community.cumulocity.com/u/Christof_Strack)\
**Post date:** [June 12, 2023, 12:20pm UTC](https://community.cumulocity.com/t/preview-image-for-plugin-widget-is-not-displayed/1320/1 "2023-06-12T12:20:13Z")

</div>

Hi,

I created a [github repository](https://github.com/Cumulocity-IoT/cumulocity-plugin-raise-alarm) 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

```auto
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:

```auto
...
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:

 ![Screenshot 2023-06-12 at 14.08.18](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/0/20ef9cbe5d3613e6ccb6e7bfdda0015db3419e28.png)

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

Regards Christof

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [June 13, 2023, 9:46am UTC](https://community.cumulocity.com/t/preview-image-for-plugin-widget-is-not-displayed/1320/2 "2023-06-13T09:46:11Z")

</div>

Hi Christof,

By specifying:

```auto
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:

```auto
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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [December 10, 2023, 9:46am UTC](https://community.cumulocity.com/t/preview-image-for-plugin-widget-is-not-displayed/1320/3 "2023-12-10T09:46:41Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.