Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Respect's avatar

How to access uploaded file or image by path in nuxt 3

** Hello friends Thanks So much for try help

  • i uploaded file to server side in this path server/uploads/image.png
  • QUESTIONS : How to show in in client side frontend
  • I'M USING
// IN SERVER RESPONSE AFTER UPLOADED SUCCEFULLY
 let uploadedPath = `/server/uploads/${newName}`
return  uploadedPath;

// IN CLIENT SIDE FRONTEND 
<template>
<img :src="uploedFilePath" alt="uploaded is here">
</template>
<script lang="ts">
const uploedFilePath = ref(null)
 const { data, error } = await useFetch('/api/upload/files', {
            method: 'post',
            body: formData,
        })

 // TO SHOW UPLOADED FILES
 uploedFilePath.value = data.value;
</script>

// CONSOLE SHOW ERROR  BUT File Already exists
GET http://localhost:3000/server/uploads/19651logo2.svg 404 (Page not found: /server/uploads/19651logo2.svg)
// IN BROWSER INSPECT ELEMNT 
<img alt="uploaded is here" data-v-inspector="pages/profile.vue:45:21" src="/server/uploads/19651logo2.svg">
// IF I MADE <img /> manually file showing without any problem
 <img src="/server/uploads/19651logo2.svg" class="preview" alt="showfile"> // FILE SHOWING SUCCESSFULLY
// i OD NOT KNOW WHAT THE PROBLEM JUST NEED UPLOAD FILES TO SECURE PATH AND SHOWING THEM

0 likes
0 replies

Please or to participate in this conversation.