Fix model images 404 under a subpath mount (withBase)

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

View File

@@ -131,6 +131,7 @@ import { useRoute } from 'vue-router'
import JsBarcode from 'jsbarcode'
import { renderQrDataUrl } from './qrLogo'
import { getSetting } from '@/utils/siteSettings'
import { withBase } from '@/utils/basePath'
import {
TYPE_CONFIG, hasLocationType, resolveDefaultEncodes,
effectiveEncodes as effEncodes, resolveCodeText as resolveText, captionFor,
@@ -171,7 +172,7 @@ const cardTitle = computed(() => {
const imageUrl = computed(() => {
const ext = extension.value
return (ext && ext.imageurl) ? ext.imageurl : null
return (ext && ext.imageurl) ? withBase(ext.imageurl) : null
})
// Small identity table shown on the card.

View File

@@ -54,7 +54,7 @@ const modelName = computed(() => {
const imageUrl = computed(() => {
if (!machine.value) return null
const img = machine.value.machine?.imageurl
if (img) return img.startsWith('/') ? img : `/images/models/machines/${img}`
if (img) return withBase(img.startsWith('/') ? img : `/images/models/machines/${img}`)
return null
})

View File

@@ -136,7 +136,7 @@
<div class="form-group">
<label>Image</label>
<div class="image-manage">
<img v-if="form.imageurl" :src="form.imageurl" alt="Model image" class="image-thumb" />
<img v-if="form.imageurl" :src="withBase(form.imageurl)" alt="Model image" class="image-thumb" />
<div class="image-actions">
<template v-if="editingModel">
<input
@@ -209,6 +209,7 @@ import { modelsApi, vendorsApi, modeltypesApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
import { withBase } from '@/utils/basePath'
import { useListQuery } from '@/composables/listQuery'
const toast = useToast()