Question 227795 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to work with images on the Nuxt + Laravel website?

I’m making a website on Nuxt 3 + Laravel (backend). I have an article editor where I can upload an image. I need to compress and crop this image for several different formats. Then, I will take the desired format depending on where it is output. Nuxt and Laravel are located in different folders on the server, with different urls. Questions:

  1. Where should I store images – in Nuxt or Laravel?

If in Laravel, then:

  1. How do I access them from Nuxt?
  2. How can I specify the paths to the images, given that the site is currently accessed via the local path – localhost:8000? I need the images not to disappear when I publish the site on the internet.
Tags:

2

Answers


  1. 0

    Try @storage directive

    <img src="@storage('images/product-image.jpg', { baseUrl: process.env.BASE_URL })" />

    Assuming your image file is located in the images directory of Laravel’s storage directory. The @storage() directive will automatically resolve the path to the image file and return it as a string.

    Login or Signup to reply.
  2. 0

    The decision of where to store images depends on your specific use case and requirements. you can store static images like (Banner icons) on NuxtJS side and dynamic images like (user documents, product images, and avatars) on the Laravel side.

    So on the Laravel side, you can use file functions and store images in a storage folder after that create a storage link (PHP artisan storage:link) after that create API and return the full image path in the response object.

    public function uploadImage(Request $request)
    {
        $image = $request->file('image');
        if ($image) {
            $file_name = uniqid() . '.' . $image->getClientOriginalExtension();
            Storage::disk('public')->putFileAs('images', $image, $file_name);

          //store complete path in db or just name of name 
          //'/storage/images/' . $filename
        }
        return response()->json(['error' => 'No image uploaded'], 400);
    }

    In NuxtJS you can utilize the with some configuration.
    https://image.nuxtjs.org/configuration

    <nuxt-img :src="user. Avatar" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search