Jan 6, 2024
0
Level 3
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
Please or to participate in this conversation.