Add getImagePath() to lib.ts

4 files changed, 11 insertions, 6 deletions

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 46433f7..4f9165f 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -56,7 +56,7 @@
 					@change="onSettingChg('transitionDuration')" class="my-auto" name="animationTimeInput"/>
 				<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
 				<!-- Row 2 -->
-				<label for="autoModeDelayInput">Auo-mode Delay</label>
+				<label for="autoModeDelayInput">Auto-mode Delay</label>
 				<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
 					@change="onSettingChg('autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
 				<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 15b8a0b..2a59d94 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -51,7 +51,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
-import {TolNode, TolMap, UiOptions} from '../lib';
+import {TolNode, TolMap, getImagePath, UiOptions} from '../lib';
 import {LayoutNode, LayoutOptions} from '../layout';
 import {capitalizeWords} from '../util';
 
@@ -215,7 +215,7 @@ export default defineComponent({
 				styles = {
 					...styles,
 					backgroundImage: this.tolNode.imgName != null ?
-						`${scrimGradient},url('/img/${(this.tolNode.imgName as string).replaceAll('\'', '\\\'')}')` :
+						`${scrimGradient},url('${getImagePath(this.tolNode.imgName as string)}')` :
 						'none',
 					backgroundColor: this.uiOpts.bgColorDark,
 					backgroundSize: 'cover',
@@ -499,7 +499,7 @@ export default defineComponent({
 				height: '100%',
 				// Image (and scrims)
 				backgroundImage: (this.tolNode.imgName![idx]! != null) ?
-					`${scrimGradient},url('/img/${(this.tolNode.imgName![idx] as string).replaceAll('\'', '\\\'')}')` :
+					`${scrimGradient},url('${getImagePath(this.tolNode.imgName![idx]! as string)}')` :
 					'none',
 				backgroundColor: this.uiOpts.bgColorDark,
 				backgroundSize: '125%',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index a85fa72..82db5d4 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -59,7 +59,8 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {LayoutNode, LayoutOptions} from '../layout';
-import {TolNode, TolMap, getServerResponse, DescInfo, ImgInfo, NodeInfo, InfoResponse, UiOptions} from '../lib';
+import {TolNode, TolMap, getServerResponse, getImagePath,
+	DescInfo, ImgInfo, NodeInfo, InfoResponse, UiOptions} from '../lib';
 import {capitalizeWords} from '../util';
 
 export default defineComponent({
@@ -111,7 +112,7 @@ export default defineComponent({
 				width: this.lytOpts.maxTileSz + 'px',
 				height: this.lytOpts.maxTileSz + 'px',
 				backgroundImage: imgName != null ?
-					'url(\'/img/' + imgName.replaceAll('\'', '\\\'') + '\')' :
+					`url('${getImagePath(imgName as string)}')` :
 					'none',
 				backgroundColor: this.uiOpts.bgColorDark,
 				backgroundSize: 'cover',
diff --git a/src/lib.ts b/src/lib.ts
index be3b6d6..cad51c4 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -42,6 +42,10 @@ export async function getServerResponse(params: string){
 	}
 	return responseObj;
 }
+const SERVER_IMG_PATH = '/img/'
+export function getImagePath(imgName: string): string {
+	return SERVER_IMG_PATH + imgName.replaceAll('\'', '\\\'');
+}
 // For server search responses
 export type SearchSugg = { // Represents a search-string suggestion
 	name: string,