ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix model images 404 under a subpath mount (withBase)

Browse Source 
Model image URLs are root-relative (/api/models/image/...), so on an /ops
subpath deploy the raw <img src> resolved to the server root and 404'd. Wrap
every model-image src in withBase(): machine/printer/PC/network detail heroes,
the models settings preview, and the machine-badge / asset-label print pages.
withBase leaves external http(s)/data URLs untouched.
This commit is contained in:
cproudlock
2026-07-20 11:14:00 -04:00
parent 91fa3b9115
commit 31139267d1
7 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/computers/frontend/views/PCDetail.vue
View File

@@ -15,7 +15,7 @@
<!-- Hero Section -->
<div class="hero-card">
<div class="hero-image" v-if="computer.computer?.imageurl">
<img :src="computer.computer.imageurl" :alt="computer.computer.modelname || 'Model photo'" />
<img :src="withBase(computer.computer.imageurl)" :alt="computer.computer.modelname || 'Model photo'" />
</div>
<div class="hero-content">
<div class="hero-title">
@@ -241,6 +241,7 @@ import { ref, onMounted } from 'vue'
import { colorStyle } from "@/utils/colorStyle"
import { useRoute } from 'vue-router'
import { computersApi, applicationsApi } from '@/api'
import { withBase } from '@/utils/basePath'
import { useWarrantyBadge } from '@/composables/warrantyBadge'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'

3
plugins/machines/frontend/views/MachineDetail.vue
View File

@@ -32,7 +32,7 @@
<!-- Hero Section -->
<div class="hero-card">
<div class="hero-image" v-if="machine.machine?.imageurl">
<img :src="machine.machine.imageurl" :alt="machine.machine.modelname || 'Model photo'" />
<img :src="withBase(machine.machine.imageurl)" :alt="machine.machine.modelname || 'Model photo'" />
</div>
<div class="hero-content">
<div class="hero-title">
@@ -235,6 +235,7 @@
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { machinesApi } from '@/api'
import { withBase } from '@/utils/basePath'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
import PluginAssetPanels from '@/components/PluginAssetPanels.vue'

3
plugins/network/frontend/views/NetworkDeviceDetail.vue
View File

@@ -2,7 +2,7 @@
<div class="detail-page" v-if="device">
<div class="hero-card">
<div class="hero-image">
<img v-if="device.networkdevice?.imageurl" :src="device.networkdevice.imageurl" alt="Model photo" />
<img v-if="device.networkdevice?.imageurl" :src="withBase(device.networkdevice.imageurl)" alt="Model photo" />
<div class="device-icon" v-else>
<span class="icon"><component :is="getDeviceIcon()" :size="24" /></span>
</div>
@@ -202,6 +202,7 @@ import { useRoute, useRouter } from 'vue-router'
import { Network, Router, Shield, Wifi, Camera, Server, Server as Rack, Globe } from 'lucide-vue-next'
import { useAuthStore } from '@/stores/auth'
import { networkApi } from '@/api'
import { withBase } from '@/utils/basePath'
import AssetRelationships from '@/components/AssetRelationships.vue'
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
import PluginAssetPanels from '@/components/PluginAssetPanels.vue'

3
plugins/printers/frontend/views/PrinterDetail.vue
View File

@@ -20,7 +20,7 @@
<!-- Hero Section -->
<div class="hero-card">
<div class="hero-image" v-if="printer.printer?.imageurl">
<img :src="printer.printer.imageurl" :alt="printer.printer.modelname || 'Model photo'" />
<img :src="withBase(printer.printer.imageurl)" :alt="printer.printer.modelname || 'Model photo'" />
</div>
<div class="hero-content">
<div class="hero-title">
@@ -280,6 +280,7 @@
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { printersApi } from '@/api'
import { withBase } from '@/utils/basePath'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
import PluginAssetPanels from '@/components/PluginAssetPanels.vue'