refactor references to use new image server

src/components/AlbumView/Header.vue

@@ -5,7 +5,7 @@
         <div
           class="image shadow-lg"
           :style="{
-            backgroundImage: `url(&quot;${props.album.image}&quot;)`,
+            backgroundImage: `url(&quot;${imguri + props.album.image}&quot;)`,
           }"
         ></div>
       </div>
@@ -32,7 +32,9 @@ import perks from "../../composables/perks.js";
 import { AlbumInfo } from "../../interfaces.js";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { playSources } from "../../composables/enums";
+import { paths } from "../../config";
 
+const imguri = paths.images.thumb
 const props = defineProps<{
   album: AlbumInfo;
 }>();

src/components/LeftSidebar/SongCard.vue

@@ -6,7 +6,7 @@
           <div
             class="l-image image rounded"
             :style="{
-              backgroundImage: `url(&quot;${track.image}&quot;)`,
+              backgroundImage: `url(&quot;${imguri + track.image}&quot;)`,
             }"
           ></div>
         </div>
@@ -36,6 +36,9 @@
 <script setup lang="ts">
 import perks from "../../composables/perks";
 import { Track } from "../../interfaces";
+import { paths } from "../../config";
+const imguri = paths.images.thumb
+
 const putCommas = perks.putCommas;
 
 const props = defineProps<{

src/components/PlaylistView/Header.vue

@@ -3,7 +3,7 @@
     class="p-header image"
     :style="[
       {
-        backgroundImage: `url(${props.info.image})`,
+        backgroundImage: `url(${imguri + props.info.image})`,
       },
     ]"
   >
@@ -45,7 +45,9 @@ import useModalStore from "../../stores/modal";
 import Option from "../shared/Option.vue";
 import pContext from "../../contexts/playlist";
 import useContextStore from "../../stores/context";
+import { paths } from "../../config";
 
+const imguri = paths.images.playlist
 const context = useContextStore();
 const modal = useModalStore();
 

src/components/RightSideBar/queue/upNext.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="main-item border" @click="playNext">
     <div class="h">Up Next</div>
-    <div class="itemx  shadow">
+    <div class="itemx shadow">
       <div
         class="album-art image"
         :style="{
-          backgroundImage: `url(&quot;${next.image}&quot;)`,
+          backgroundImage: `url(&quot;${imguri + next.image}&quot;)`,
         }"
       ></div>
       <div class="tags">
@@ -24,6 +24,8 @@
 <script setup lang="ts">
 import { Track } from "../../../interfaces";
 import perks from "../../../composables/perks";
+import { paths } from "../../../config";
+const imguri = paths.images.thumb;
 
 const props = defineProps<{
   next: Track;
@@ -38,7 +40,7 @@ const props = defineProps<{
 
   &:hover {
     background-color: $accent;
-    border:  1px solid transparent;
+    border: 1px solid transparent;
 
     .h {
       background-color: $black;

src/components/playlists/PlaylistCard.vue

@@ -10,7 +10,7 @@
     <div
       class="image p-image rounded shadow-sm"
       :style="{
-        backgroundImage: `url(${props.playlist.thumb})`,
+        backgroundImage: `url(${imguri + props.playlist.thumb})`,
       }"
     ></div>
     <div class="pbtn">
@@ -33,6 +33,10 @@
 import { Playlist } from "../../interfaces";
 import PlayBtn from "../shared/PlayBtn.vue";
 import Option from "../shared/Option.vue";
+import { paths } from "../../config";
+
+const imguri = paths.images.playlist
+
 
 const props = defineProps<{
   playlist: Playlist;

src/components/shared/TrackItem.vue

@@ -13,7 +13,7 @@
     <div
       class="album-art image rounded"
       :style="{
-        backgroundImage: `url(&quot;${props.track.image}&quot;)`,
+        backgroundImage: `url(&quot;${imguri + props.track.image}&quot;)`,
       }"
     >
       <div
@@ -43,9 +43,12 @@ import { ContextSrc } from "../../composables/enums";
 
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
+import { paths } from "../../config";
+
 
 const contextStore = useContextStore();
 const modalStore = useModalStore();
+const imguri = paths.images.thumb
 
 const props = defineProps<{
   track: Track;

src/config.ts

@@ -1,8 +1,9 @@
 const paths = {
   api: "",
   images: {
-    thumb: "http://0.0.0.0:9877/thumb/",
-    artist: "http://0.0.0.0:9877/artist/",
+    thumb: "http://0.0.0.0:9877/t/",
+    artist: "http://0.0.0.0:9877/a/",
+    playlist: "http://0.0.0.0:9877/p/"
   },
 };