How to fetch images from laravel server using vue?-CodePudding

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 >
      <div >
        <div >
          <div >
             <img
          :src="'../../../../../../sager/inventory/public/images/'   drones[0].image"
          
          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.

CodePudding user response：

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"
      
      alt="iPhone"
 />

CodePudding user response：

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

<section style="background-color: #eee">
  <div >
    <div >
      <div >
        <div  v-for="(dron, index) in drones" v-bind:key="index">
           <img
        :src="`/storage/${drones.image}`"
        
        alt="iPhone"
      />              
        </div>
      </div>
    </div>
  </div>
</section>