[FEATURE_REQUEST] Widget for displaying locally stored images

[RK62]

Is your feature request related to a problem? If so, please describe.

I would like to include images on my dashboard. This can be rendered Grafana graphics or just pictures from my last vacation.

Describe the solution you'd like

The widget should display an image from the local /app/public/item-icons directory. Maybe it would be better to provide a separate directory for this. It would be great to be able to select a single image or play random images from a directory.

Thanks a lot for DASHY! I use it every day and find it really cool.

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

No response

[Lissy93]

Heya @RK62, So you can actually already do this, using one of the dynamic widget options to make your own widget. For example, using the HTML Embedded Widget, your config would be:

- type: embed
  options:
    html: '<img src="https://dashy.lan/item-icons/my-image.png" />'

Hope that helps :)

[Lissy93]

We could add a dedicated widget just for displaying images, it would be really easy to do by extending from the WidgetMixin.

For example, in a new file, src\components\Widgets\ImageWidget.vue:

<template>
<div class="image-widget">
  <img :src="imagePath" class="embedded-image" />
</div>
</template>

<script>
import WidgetMixin from '@/mixins/WidgetMixin';
export default {
  mixins: [WidgetMixin],
  computed: {
    imagePath() {
      if (!this.options.imagePath) this.error('You must specify an imagePath');
      return this.options.imagePath;
    },
  },
};
</script>

<style scoped lang="scss">
.image-widget {
  img.embedded-image {
    max-width: 100%;
    margin: 0.2rem auto;
  }
}
</style>

Then just import that file in WidgetBase.vue, and maybe add it into the docs. More details on doing so is available here.

You can then use the widget like normal, e.g:

- type: image
  options:
    imagePath: https://i.ibb.co/yhbt6CY/dashy.png

[liss-bot]

This issue has been marked as a good first issue for first-time contributors to implement! This is a great way to support the project, while also improving your skills, you'll also be credited as a contributor once your PR is merged. If you're new to web development, here are a collection of resources to help you get started. You can also find step-by-step tutorials for common tasks within Dashy, on the Dev Guides page. If you need any support at all, feel free to reach out via GitHub Discussions.

---

I am a bot, and this is an automated message 🤖

[Lissy93]

I've implemented this in #488, Let me know how you get on with that

---

Example

- name: Image Example
  icon: far fa-image
  widgets:
  - type: image
    options:
      imagePath: https://picsum.photos/400

See the Docs for full usage instructions.

[RK62]

Thanks a lot, this works great!
In docker-compose I mount the directory
- ${SSDPROD}/dashy/media:/app/public/media
and then can use

      - type: image
options:
imagePath: /media/bobcat1.png

in Dashy to show it.
The given links on https://github.com/Lissy93/dashy/blob/master/docs/widgets.md#image are very helpful!

dashy/widgets.md at master · Lissy93/dashy

🚀 A self-hosted startpage for your server. Easy to use visual editor, status checking, widgets, themes and tons more! - dashy/widgets.md at master · Lissy93/dashy