das geht auch live

components/Bought.vue

@@ -6,11 +6,11 @@
                     <template #icons>
                         <Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" />
                     </template>
-                    <DataView :value="itemsb" paginator :rows="5">
+                    <DataView id="dv" :value="itemsb" paginator :rows="5">
                         <template #list="slotProps">
                             <div class="col-12">
                                 <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
-                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="getImageUrl(slotProps.data.frontview.pfad)" :alt="slotProps.data.kurzbeschreibung" />
+                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="slotProps.data.frontview.imgurl" :alt="slotProps.data.kurzbeschreibung" />
                                     <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                         <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                             <div class="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div>
@@ -29,7 +29,6 @@
                                         
                                     </div>
                                 </div>
-
                             </div>
                         </template>
                     </DataView>
@@ -80,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 const pfad = '/photos';
 import { useToast } from 'primevue/usetoast';
 import { stringify } from "querystring";
@@ -99,12 +98,11 @@ import { stringify } from "querystring";
 const toast = useToast();    
 const createItemBDialog = ref(false);
 const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
-//const itemsb = ref();
-
-const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
-const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
-
 let imgurl = ref();
+const imgref = ref();
+//imgref.value='1679468897186c75b5379eb6691871da30ef18b98a_1.jpg';
+const {data: itemsb } = await awaitItemsb();
+const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
 
 async function openDetail(id) {
     await navigateTo({
@@ -118,13 +116,33 @@ async function openDetail(id) {
      ) 
 };
 
+async function awaitItemsb() {
+    const res = await useFetch('http://ubodroid-2:8081/api/v1/itb');
+    let r: any;
+    
+    
+    for (r in res.data.value) {
+        console.log('Ausgabe r: ', res.data.value[r]);
+        const st = res.data.value[r].frontview.pfad;
+        res.data.value[r].frontview.imgurl = new URL(`${pfad}/${st}`, import.meta.url).href; //});
+        console.log( res.data.value[r].frontview.imgurl);
+    }
+
+    console.log('Ausgabe res: ', res.data.value);
+    return res;
+}
+
+
+
 async function openEval(id) {
     
 };
+onMounted(() => {
+    
+});
+
+
 
-function getImageUrl(name) {
-    return imgurl = computed(() => { return new URL(`${pfad}/${name}`, import.meta.url).href; });
-}
 
 const onNew = () => {
     itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
@@ -160,4 +178,4 @@ const OnChangeDD = () => {
     console.log('Die ausgewählte Option ist: ', itemb.value)
 }
 
-</script>
+</script>