N
Nuxt•2mo ago
Lean

Uploading, storing and displaying images

Hello everyone. Im a bit stuck on how to correctly create a system for uploading, storing and displaying images on my website. In the first iteration of this project, i was using regular vue and uploaded images directly to the public/ folder, which worked absolutely fine, but as i read, this wont work for nuxt, as nuxts server wont be aware of the changes. I dont want to use some cloud service and would like everything to stay directly on my machine. What would be a good/the best way of sorting this out ?
6 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Lean. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, handling images directly in the public/ directory is a common approach for static assets, as these files are served directly at the root URL of your application. However, if you are dynamically uploading images during runtime, the server won't automatically recognize these changes because the public/ directory is typically used for static files that are part of the build. For a system that allows uploading, storing, and displaying images without using a cloud service, you might consider the following approach: 1. Upload and Store Images: - You can create an API endpoint in your Nuxt application using server middleware or a serverless function to handle image uploads. This endpoint can save the uploaded images to a directory on your server that is accessible to your application. 2. Serve Images: - Once the images are uploaded, you can serve them from a directory that your Nuxt application can access. If you choose to store them in a directory other than public/, you will need to ensure that your server is configured to serve files from this directory. 3. Display Images: - To display the images, you can use the <NuxtImg> component from the Nuxt Image module, which optimizes images for performance. Ensure that the images are accessible via a URL that your application can use. Here is a basic example of how you might configure your nuxt.config.ts to specify a custom directory for images: 
export default defineNuxtConfig({
  image: {
    dir: 'assets/images' // Specify your custom directory for images
  }
})
export default defineNuxtConfig({
  image: {
    dir: 'assets/images' // Specify your custom directory for images
  }
})
For more detailed information on handling assets in Nuxt, you can refer to the Nuxt Assets Documentation. If you need to handle dynamic image processing or optimization, you might need to implement additional server-side logic or use a module like Nuxt Image with a custom provider. However, for a simple setup where you manage everything locally, the above approach should suffice. For further reading, you can explore the Nuxt Image Documentation for more options on image handling and optimization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@401116245857927199> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lean
LeanOP•2mo ago
@kapa.ai Authorized users will be able to create new houses stored in a mysql database using prisma orm, these houses are then listed on a housing page, or can be viewed as a single house by adding an id in the query, thing is, so far ive set it up in a way that it also has a mainimage field, which acts like a showcase, and id assume id need a percise path of the image to display it correctly.
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- To manage and display images for houses stored in a MySQL database using Prisma ORM in a Nuxt application, you can follow these steps: 1. Database Schema: - Ensure your Prisma schema includes a mainImage field for the House model. This field should store the path or URL of the image. 
   model House {
     id        Int     @id @default(autoincrement())
     name      String
     mainImage String  // This field stores the path or URL to the main image
     // other fields...
   }
   
   model House {
     id        Int     @id @default(autoincrement())
     name      String
     mainImage String  // This field stores the path or URL to the main image
     // other fields...
   }
2. Image Upload and Storage: - Implement an API endpoint to handle image uploads. This endpoint should save the image to a directory on your server and return the path or URL of the saved image. - Store the returned path or URL in the mainImage field of the House record in your database. 3. Displaying Images: - Use the <NuxtImg> component from the Nuxt Image module to display the mainImage on your housing page or single house view. Ensure the path or URL stored in the database is accessible by your application. 
   <template>
     <div>
       <h1>{{ house.name }}</h1>
       <NuxtImg :src="house.mainImage" alt="Main Image of the House" />
       <!-- other house details -->
     </div>
   </template>

   <script setup>
   import { ref, onMounted } from 'vue'
   import { useRoute } from 'vue-router'
   import { useFetch } from '@nuxt/http'

   const route = useRoute()
   const house = ref(null)

   onMounted(async () => {
     const { data } = await useFetch(`/api/houses/${route.params.id}`)
     house.value = data
   })
   </script>
   
   <template>
     <div>
       <h1>{{ house.name }}</h1>
       <NuxtImg :src="house.mainImage" alt="Main Image of the House" />
       <!-- other house details -->
     </div>
   </template>

   <script setup>
   import { ref, onMounted } from 'vue'
   import { useRoute } from 'vue-router'
   import { useFetch } from '@nuxt/http'

   const route = useRoute()
   const house = ref(null)

   onMounted(async () => {
     const { data } = await useFetch(`/api/houses/${route.params.id}`)
     house.value = data
   })
   </script>
4. API Endpoint for Fetching House Data: - Create an API endpoint to fetch house data, including the mainImage field, from your database. 
   // Example of a server middleware or API route
   export default async (req, res) => {
     const { id } = req.query
     const house = await prisma.house.findUnique({
       where: { id: parseInt(id) },
     })
     res.json(house)
   }
   
   // Example of a server middleware or API route
   export default async (req, res) => {
     const { id } = req.query
     const house = await prisma.house.findUnique({
       where: { id: parseInt(id) },
     })
     res.json(house)
   }
By following these steps, you can effectively manage and display images for houses in your Nuxt application. For more information on handling assets and images in Nuxt, you can refer to the Nuxt Assets Documentation and Nuxt Image Documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@401116245857927199> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lean
LeanOP•2mo ago
yea that just stores the path but no idea if it actually works and is actually accessible Any ideas ? Just noticed i already created a post like this some time ago, but that also lead me nowhere really, sorry i guess

Did you find this page helpful?