Why is my image not showing in vue js from api?-CodePudding

In my laravel vue project, during fetching data from laravel backend, I am not getting image from api. All other datas are appearing except the image.

JSON:

[
    {
        "id": 1,
        "name": "Tanjib",
        "destination": "Sweden",
        "adult": 4,
        "children": 2,
        "flight_on_date": "2021-12-17",
        "image": "1638790776.png",
        "created_at": "2021-12-06T11:39:36.000000Z",
        "updated_at": "2021-12-06T11:39:36.000000Z"
    }
]

My code:

<div v-for="(data, index) in bookingList" :key="index">
      <table class="table">
        <tr>
          <th>Name</th>
          <th>Destination</th>
          <th>Adult</th>
          <th>Children</th>
          <th>Flight Date</th>
          <th>Image</th>
        </tr>
        <tr>
          <td>{{data.name}}</td>
          <td>{{data.destination}}</td>
          <td>{{data.adult}}</td>
          <td>{{data.children}}</td>
          <td>{{data.flight_on_date}}</td>
          <td><img :src="data.image" alt=""> </td>
        </tr>
      </table>
    </div>

Do I need to do anything else ?

As I am new to laravel, please kindly try to provide solution as details as possible. My backend code is given below:

My backend controller:

public function store(Request $request)
    {
        // dd($request);
        $request->validate([
            // 'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        try {
            $imageName = null;
            if ($request->hasFile('image')) {
                $images = $request->file('image');
                $imageName = time() . '.' . $images->extension();
                $path = $request->file('image')->storeAs(
                    'public/images',
                    $imageName
                );
            }

            $sql= Booking::create([
                'name' => $request['name'],
                'destination' => $request['destination'],
                'adult' => $request['adult'],
                'children' => $request['children'],
                'flight_on_date' => $request['flight_on_date'],
                // 'image' => $imageName,
                'image' => $path,

            ]);

            if($sql){
                return "Success";
            }else{
                return "Fail";
            }
        } catch (\Exception $e) {
        }
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show()
    {
        $bookings = Booking::all();
        return $bookings;
    }

CodePudding user response：

you need to provide a complete address to the image for src, i recommend you send the complete address from the server. something like this : https://www.your_domain.com/images/1638790776.png

CodePudding user response：

Passing the image name directly tot the src element is not sufficient. You can use an accessor on the model. Let me explain. I have a Product model on my project and the products table has the following columns:

name
description
unit_price
thumb

The thumb column contains values like 51237594231582362140298002369.png and I keep these images inside the storage/products directory. Then in my Product model, I have an accessor as follows:

    /**
     * Get the product's thumbnail.
     *
     * @param  string  $value
     * @return string
     */
    public function getThumbAttribute($value)
    {
        return asset('storage/products/' . $value);
    }

This accessor accesses the value from the thumb column and appends https://my-awesome-store.com/storage/products/ to the thumb name. I use this as the src for my image elements. By the way, I have my storage directory linked to the public directory.

For further reading -

Hope it helps. Feel free to reach out if you need help.