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

Question

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;
    }

Change image to have full url. Or use full url to image to show the image. — Rajesh Paudel
– Rajesh Paudel, Commented Dec 8, 2021 at 11:05
I am new to laravel. I think my image url is 127.0.0.1:8000/images/1638790776.png — alprazolam
– alprazolam, Commented Dec 8, 2021 at 11:29

fhsinchy · Accepted Answer · 2021-12-08 11:24:12Z

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.

Mah Es · Accepted Answer · 2021-12-08 15:28:39Z

1

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

just check the storage path of your image, for example, your image might be in your public/images folder. then your full image url will be as i said above.

you can create this full url using accessor in laravel model. open your Booking.php model file and put this code in it :

public function getImageAttribute($value){
    return 'your_domain.com/images/'.$value;
}

just replace your_domain.com with your real domain (like http://mysite.local or http://127.0.0.1:8000/)

edited Dec 8, 2021 at 15:28

answered Dec 8, 2021 at 11:05

Mah Es

6305 silver badges6 bronze badges

5 Comments

alprazolam Over a year ago

Can you show an example of how to write in src ?

Mah Es Over a year ago

:src="data.image" is the right way. the image address is your problem as i said. @alprazolam

Mah Es Over a year ago

i edited the answer. you can check it @alprazolam

alprazolam Over a year ago

Ok. Now in vue how to link it in src ? I mean what to write in src in vue.

Mah Es Over a year ago

:src="data.image" is fine if your address is complete. just the way you did it before. it was never a problem of vue

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related