How to fetch images from laravel server using vue?

Question

I'm still new to working with APIs and laravel and vue. I have a Laravel backend server, you can create a "Drone" like that:

$droneModel = new DroneModel;

    $data = $request->all();

    foreach ($data as $key => $value) {
        $droneModel->$key = $request->$key;
    }

    if ($request->hasFile('image')) {
        $file = $request->file('image');
        $extension = $file->getClientOriginalExtension();
        $fileName = time() . '.' . $extension;
        $file->move('images/drones/', $fileName);
        $droneModel->image = $fileName;
        // $droneModel->image = imgUpload($request, 'drones');
    }

    $droneModel->save();

    return response()->json([
        'message' => 'Drone Model Added successfully',
        'Drone' => $droneModel
    ], 201);

images are stored in the database by the name of the image, and its saved in the "/public/images/drones/" folder

in the vueJs project, I have this:

<script>
import axios from "axios";

export default {
  name: "listDrones",
  data() {
    return {
      drones: [],
    };
  },
  created() {
    this.getDrones();
  },
  methods: {
    getDrones() {
      axios.get("http://127.0.0.1:8000/api/drones").then((response) => {
        this.drones = response.data;
      });
    },
  },
};
</script>

<template>
  <!-- <p>{{ drones }}</p> -->
  <section style="background-color: #eee">
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
          <div class="card text-black">
             <img
          :src="'../../../../../../sager/inventory/public/images/' + drones[0].image"
          class="card-img-top"
          alt="iPhone"
        />              
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

all the drones in the database are stored in the "drones" variable and I want to display images but don't know how.

I know the src is not correct so please help.

is the inventory/public/images/ directory part of the laravel project or the vue project? — yoduh
– yoduh, Commented Sep 12, 2022 at 15:32

Adel Stiti · Accepted Answer · 2022-09-12 15:28:10Z

1

First, in Laravel, you might saving all the path of the image in the database, like this

  if ($request->hasFile('image')) {
    $file = $request->file('image');
    $extension = $file->getClientOriginalExtension();
    $fileName = time() . '.' . $extension;
    $file->move('images/drones/', $fileName);
    $droneModel->image = 'images/drones/'+$fileName;
}

then in VueJS, you need to create an environment variable that contains the URI of your API

VUE_APP_BACKEND_URI=......

in your component you should concat this global variable with the image path

 <img
     :src="process.env.VUE_APP_BACKEND_URI + drones[0].image"
      class="card-img-top"
      alt="iPhone"
 />

answered Sep 12, 2022 at 15:28

Adel Stiti

589 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sting Over a year ago

I've read about adding "$drone->image = asset($drone->image);" when retrieving "drones" in the back-end, Now in the vue project it's requesting "127.0.0.1:8000/api/images/drones/1660548031.jpeg", "8000 is the laravel project host". but still the images aren't retrived.

Adel Stiti Over a year ago

Try to remove the prefix /api from the URI, and don't forget to link the storage by running the command php artisan storage:link

David Chavarria · Accepted Answer · 2022-09-12 15:35:13Z

0

drone is an array you have to create a v-for

<section style="background-color: #eee">
  <div class="container py-5">
    <div class="row">
      <div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
        <div class="card text-black" v-for="(dron, index) in drones" v-bind:key="index">
           <img
        :src="`/storage/${drones.image}`"
        class="card-img-top"
        alt="iPhone"
      />              
        </div>
      </div>
    </div>
  </div>
</section>

answered Sep 12, 2022 at 15:35

David Chavarria

1351 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to fetch images from laravel server using vue?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related