Bugfix: resolve image URLs against wwwroot on sub-directory installs #459 #460

cbadusch · cbadusch · commit ec60b6fcb40e · 2026-07-23T12:17:55.000+02:00
diff --git a/classes/asset_handler.php b/classes/asset_handler.php
@@ -60,7 +60,9 @@ public static function get_image_paths() {
             $path = $CFG->dirroot . '/local/adele/public/' . $pathorigin . '/*';
             $filelist = glob($path);
             foreach ($filelist as $file) {
-                $filepath[$pathorigin][] = [ 'path' => str_replace($CFG->dirroot, '', $file)];
+                // Absolute URL (like the uploaded pluginfile URLs below): a root-relative
+                // path 404s on sub-directory installs, e.g. localhost/moodle03 (#459).
+                $filepath[$pathorigin][] = [ 'path' => $CFG->wwwroot . str_replace($CFG->dirroot, '', $file)];
             }
         }
         // Get uploaded images from mdl_files.
diff --git a/vue3/components/LearningPathList.vue b/vue3/components/LearningPathList.vue
@@ -88,7 +88,7 @@
                 class="mb-2"
                 :style="{
                   height: '10rem',
-                  backgroundImage: singlelearningpath.image ? `url(${singlelearningpath.image})` : '',
+                  backgroundImage: singlelearningpath.image ? `url(${absUrl(singlelearningpath.image, store.state.wwwroot)})` : '',
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                   backgroundColor: '#cccccc',
@@ -213,7 +213,7 @@
                 class="mb-2"
                 :style="{
                   height: '10rem',
-                  backgroundImage: viewablelearningpath.image ? `url(${viewablelearningpath.image})` : '',
+                  backgroundImage: viewablelearningpath.image ? `url(${absUrl(viewablelearningpath.image, store.state.wwwroot)})` : '',
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                   backgroundColor: '#cccccc',
@@ -260,6 +260,7 @@
 <script setup>
 // Import needed libraries
 import { computed, ref, watch, onMounted, } from 'vue'
+import absUrl from '../composables/absUrl';
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router';
 import { notify } from "@kyvg/vue3-notification"
diff --git a/vue3/components/charthelper/textInputs.vue b/vue3/components/charthelper/textInputs.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
+import absUrl from '../../composables/absUrl';
 import { notify } from "@kyvg/vue3-notification";
 import { useStore } from 'vuex'
 import userSearch from './userSearch.vue';
@@ -190,7 +191,7 @@ const editLearningpath = async (singlelearningpathid) => {
                 class="image-preview-container"
               >
                 <img
-                  :src="selectedCourseImagePath"
+                  :src="absUrl(selectedCourseImagePath, store.state.wwwroot)"
                   alt="Selected Image"
                   class="image-preview"
                 >
diff --git a/vue3/components/modals/HelpingSlider.vue b/vue3/components/modals/HelpingSlider.vue
@@ -226,7 +226,10 @@ import { useStore } from 'vuex';
 const store = useStore();
 const s = computed(() => store.state.strings);
 
-const imageBase = '/local/adele/public/tutorial/';
+// Prefix with the Moodle root URL so the images resolve on sub-directory installs
+// (e.g. localhost/moodle03/...); a root-relative path 404s there and the flex
+// containers collapse to zero height (GitHub #460 tester feedback).
+const imageBase = store.state.wwwroot + '/local/adele/public/tutorial/';
 
 // Each step: which part it belongs to, the screenshot, caption string keys and
 // the markers (position in % of the image plus a label string key).
diff --git a/vue3/components/modals/ModalNode.vue b/vue3/components/modals/ModalNode.vue
@@ -139,7 +139,7 @@
                   class="image-preview-container"
                 >
                   <img
-                    :src="selectedCourseImagePath"
+                    :src="absUrl(selectedCourseImagePath, store.state.wwwroot)"
                     alt="Selected Image"
                     class="image-preview"
                   >
@@ -180,7 +180,7 @@
                 class="image-preview-container"
               >
                 <img
-                  :src="previewImage"
+                  :src="absUrl(previewImage, store.state.wwwroot)"
                   alt="Selected Image"
                   class="image-preview"
                 >
@@ -219,6 +219,7 @@
 <script setup>
 // import dependancies
 import { useStore } from 'vuex'
+import absUrl from '../../composables/absUrl';
 import { onMounted, ref, watch, computed } from 'vue';
 
 // define constants
diff --git a/vue3/components/nodes/CustomNode.vue b/vue3/components/nodes/CustomNode.vue
@@ -25,6 +25,7 @@
 <script setup>
 // Import needed libraries
 import { Handle, Position } from '@vue-flow/core'
+import absUrl from '../../composables/absUrl';
 import { computed, onMounted, ref  } from 'vue';
 import { useStore } from 'vuex';
 import NodeInformation from '../nodes_items/NodeInformation.vue';
@@ -74,7 +75,7 @@ const learningmodule = computed(() => {
   }
   return {};
 });
-const cover_image = computed(() => get_cover_image(props.data));
+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));
 
 onMounted(() => {
   dataValue.value = props.data
diff --git a/vue3/components/nodes/CustomNodeEdit.vue b/vue3/components/nodes/CustomNodeEdit.vue
@@ -25,6 +25,7 @@
 <script setup>
 // Import needed libraries
 import { Handle, Position } from '@vue-flow/core'
+import absUrl from '../../composables/absUrl';
 import { computed, ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import CompletionOutPutItem from '../completion/CompletionOutPutItem.vue'
@@ -185,7 +186,7 @@ const zoomOnParent = (payload = {}) => {
   }
   emit('zoomOnParent', {});
 }
-const cover_image = computed(() => get_cover_image(props.data));
+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));
 
 const get_cover_image = (data) => {
   if (data.selected_course_image) {
@@ -297,7 +298,7 @@ const courseLinkTitle = computed(() =>
               <button class="icon-link" :title="courseLinkTitle" @click="goToCourse">
                 <div
                   :class="{ 'icon-with-ring': hasTimedCondition }"
-                  :style="hasTimedCondition ? { backgroundImage: 'url(/local/adele/public/ring.png)' } : {}"
+                  :style="hasTimedCondition ? { backgroundImage: 'url(' + store.state.wwwroot + '/local/adele/public/ring.png)' } : {}"
                 >
                   <i :class="['fa', iconClass,
                       {
diff --git a/vue3/components/nodes/CustomStagNodeEdit.vue b/vue3/components/nodes/CustomStagNodeEdit.vue
@@ -1,6 +1,7 @@
 <script setup>
 // Import needed libraries
 import { Handle, Position } from '@vue-flow/core'
+import absUrl from '../../composables/absUrl';
 import { computed, ref, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import CompletionOutPutItem from '../completion/CompletionOutPutItem.vue'
@@ -20,7 +21,7 @@ const store = useStore();
 const date = ref({})
 const progress = ref(0);
 
-const cover_image = computed(() => get_cover_image(props.data));
+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));
 
 const get_cover_image = (data) => {
   if (data.selected_course_image) {
diff --git a/vue3/components/nodes/ExpandNodeEdit.vue b/vue3/components/nodes/ExpandNodeEdit.vue
@@ -25,6 +25,7 @@
 <script setup>
 // Import needed libraries
 import { computed, onMounted } from 'vue';
+import absUrl from '../../composables/absUrl';
 import { useStore } from 'vuex';
 import ExpandNodeInformation from '../nodes_items/ExpandNodeInformation.vue';
 import * as nodeColors from '../../config/nodeColors';
@@ -48,7 +49,7 @@ const goToCourse = () => {
   window.open(course_link, '_blank');
 }
 
-const cover_image = computed(() => get_cover_image(props.data));
+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));
 
 const get_cover_image = (data) => {
   if (data.imagepaths && data.imagepaths[props.data.course_id]) {
diff --git a/vue3/components/nodes/OrCourses.vue b/vue3/components/nodes/OrCourses.vue
@@ -25,6 +25,7 @@
  <script setup>
  // Import needed libraries
 import { Handle, Position } from '@vue-flow/core'
+import absUrl from '../../composables/absUrl';
 import { useStore } from 'vuex';
 import { computed, onMounted, ref } from 'vue';
 import ProgressBar from '../nodes_items/ProgressBar.vue';
@@ -78,7 +79,7 @@ const learningmodule = computed(() => {
     ? parsedLearningModule.modules
     : {};
 });
-const cover_image = computed(() => get_cover_image(props.data));
+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));
 
 const props = defineProps({
   data: {
diff --git a/vue3/composables/absUrl.js b/vue3/composables/absUrl.js
@@ -0,0 +1,43 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Resolve a stored image path against the Moodle root URL.
+ *
+ * Stock-image paths were historically stored root-relative
+ * ("/local/adele/public/..."), which 404s on sub-directory installs
+ * (e.g. localhost/moodle03) and collapses the containers sized by the
+ * image (GitHub #459/#460). Absolute URLs (uploaded pluginfile images)
+ * pass through unchanged, so both legacy and new data render correctly.
+ *
+ * @package     local_adele
+ * @author      Jacob Viertel
+ * @copyright  2023 Wunderbyte GmbH
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Prefix a root-relative path with wwwroot; leave absolute URLs untouched.
+ *
+ * @param {string|null|undefined} path stored image path or URL
+ * @param {string} wwwroot the Moodle root URL (store.state.wwwroot)
+ * @returns {string|null|undefined} resolvable URL
+ */
+export default function absUrl(path, wwwroot) {
+  if (typeof path === 'string' && path.startsWith('/') && !path.startsWith('//')) {
+    return (wwwroot || '') + path;
+  }
+  return path;
+}
diff --git a/vue3/tests/unit/composables/absUrl.spec.js b/vue3/tests/unit/composables/absUrl.spec.js
@@ -0,0 +1,29 @@
+import absUrl from '../../../composables/absUrl';
+
+describe('absUrl', () => {
+  // Legacy stock-image paths were stored root-relative; on a sub-directory
+  // install they must be resolved against wwwroot (#459/#460).
+  it('prefixes a root-relative path with wwwroot', () => {
+    expect(absUrl('/local/adele/public/lp_default/a.png', 'https://moo.test/moodle03'))
+      .toBe('https://moo.test/moodle03/local/adele/public/lp_default/a.png');
+  });
+
+  it('leaves absolute URLs untouched (uploaded pluginfile images)', () => {
+    const url = 'https://moo.test/moodle03/pluginfile.php/1/local_adele/lp_images/0/x.png';
+    expect(absUrl(url, 'https://moo.test/moodle03')).toBe(url);
+  });
+
+  it('leaves protocol-relative URLs untouched', () => {
+    expect(absUrl('//cdn.test/a.png', 'https://moo.test')).toBe('//cdn.test/a.png');
+  });
+
+  it('passes through empty and non-string values unchanged', () => {
+    expect(absUrl('', 'https://moo.test')).toBe('');
+    expect(absUrl(null, 'https://moo.test')).toBeNull();
+    expect(absUrl(undefined, 'https://moo.test')).toBeUndefined();
+  });
+
+  it('survives a missing wwwroot (root install fallback)', () => {
+    expect(absUrl('/local/adele/x.png', '')).toBe('/local/adele/x.png');
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,9 @@ public static function get_image_paths() {`
`60`	`60`	`$path = $CFG->dirroot . '/local/adele/public/' . $pathorigin . '/*';`
`61`	`61`	`$filelist = glob($path);`
`62`	`62`	`foreach ($filelist as $file) {`
`63`		`- $filepath[$pathorigin][] = [ 'path' => str_replace($CFG->dirroot, '', $file)];`
	`63`	`+ // Absolute URL (like the uploaded pluginfile URLs below): a root-relative`
	`64`	`+ // path 404s on sub-directory installs, e.g. localhost/moodle03 (#459).`
	`65`	`+ $filepath[$pathorigin][] = [ 'path' => $CFG->wwwroot . str_replace($CFG->dirroot, '', $file)];`
`64`	`66`	`}`
`65`	`67`	`}`
`66`	`68`	`// Get uploaded images from mdl_files.`
Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,7 @@`
`139`	`139`	`class="image-preview-container"`
`140`	`140`	`>`
`141`	`141`	`<img`
`142`		`- :src="selectedCourseImagePath"`
	`142`	`+ :src="absUrl(selectedCourseImagePath, store.state.wwwroot)"`
`143`	`143`	`alt="Selected Image"`
`144`	`144`	`class="image-preview"`
`145`	`145`	`>`
`@@ -180,7 +180,7 @@`
`180`	`180`	`class="image-preview-container"`
`181`	`181`	`>`
`182`	`182`	`<img`
`183`		`- :src="previewImage"`
	`183`	`+ :src="absUrl(previewImage, store.state.wwwroot)"`
`184`	`184`	`alt="Selected Image"`
`185`	`185`	`class="image-preview"`
`186`	`186`	`>`
`@@ -219,6 +219,7 @@`
`219`	`219`	`<script setup>`
`220`	`220`	`// import dependancies`
`221`	`221`	`import { useStore } from 'vuex'`
	`222`	`+import absUrl from '../../composables/absUrl';`
`222`	`223`	`import { onMounted, ref, watch, computed } from 'vue';`
`223`	`224`
`224`	`225`	`// define constants`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`<script setup>`
`26`	`26`	`// Import needed libraries`
`27`	`27`	`import { Handle, Position } from '@vue-flow/core'`
	`28`	`+import absUrl from '../../composables/absUrl';`
`28`	`29`	`import { computed, ref, onMounted } from 'vue';`
`29`	`30`	`import { useStore } from 'vuex';`
`30`	`31`	`import CompletionOutPutItem from '../completion/CompletionOutPutItem.vue'`
`@@ -185,7 +186,7 @@ const zoomOnParent = (payload = {}) => {`
`185`	`186`	`}`
`186`	`187`	`emit('zoomOnParent', {});`
`187`	`188`	`}`
`188`		`-const cover_image = computed(() => get_cover_image(props.data));`
	`189`	`+const cover_image = computed(() => absUrl(get_cover_image(props.data), store.state.wwwroot));`
`189`	`190`
`190`	`191`	`const get_cover_image = (data) => {`
`191`	`192`	`if (data.selected_course_image) {`
`@@ -297,7 +298,7 @@ const courseLinkTitle = computed(() =>`
`297`	`298`	`<button class="icon-link" :title="courseLinkTitle" @click="goToCourse">`
`298`	`299`	`<div`
`299`	`300`	`:class="{ 'icon-with-ring': hasTimedCondition }"`
`300`		`- :style="hasTimedCondition ? { backgroundImage: 'url(/local/adele/public/ring.png)' } : {}"`
	`301`	`+ :style="hasTimedCondition ? { backgroundImage: 'url(' + store.state.wwwroot + '/local/adele/public/ring.png)' } : {}"`
`301`	`302`	`>`
`302`	`303`	`<i :class="['fa', iconClass,`
`303`	`304`	`{`