✨ Adds a static image widget (#487)
This commit is contained in:
28
src/components/Widgets/ImageWidget.vue
Normal file
28
src/components/Widgets/ImageWidget.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
@@ -230,6 +230,13 @@
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<ImageWidget
|
||||
v-else-if="widgetType === 'image'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<Jokes
|
||||
v-else-if="widgetType === 'joke'"
|
||||
:options="widgetOptions"
|
||||
@@ -423,6 +430,7 @@ export default {
|
||||
GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
|
||||
HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
|
||||
IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
|
||||
ImageWidget: () => import('@/components/Widgets/ImageWidget.vue'),
|
||||
Jokes: () => import('@/components/Widgets/Jokes.vue'),
|
||||
NdCpuHistory: () => import('@/components/Widgets/NdCpuHistory.vue'),
|
||||
NdLoadHistory: () => import('@/components/Widgets/NdLoadHistory.vue'),
|
||||
|
||||
Reference in New Issue
Block a user