403 Forbidden when loading images from public/image folder laravel vuejs xampp

In my profile the image is displayed perfectly but I am getting the below error in the console. if i try to access the image from public folder it dose not show me the error but if I try to access it form image folder which is sub folder it shows me the error.anyone can help me with this problem since 4 days I am searching the solution but I did not find any solution yet it will be so kind of him.

Access forbidden! You don't have permission to access the requested directory. There is either no index document or the directory is read-protected.

If you think this is a server error, please contact the webmaster.

Error 403 admin-cms.me Apache/2.4.39 (Win64) OpenSSL/1.0.2s PHP/7.1.31

My API Code is :

Route::get('profile','API\UserController@profile');

My Controller Code is:

 public function profile()
    {
        //
        return auth('api')->user();
    }

My Data and Methods Code is:

  data() {
    return {
      users: {},
      form: new Form({
        id: "",
        name: "",
        email: "",
        password: "",
        type: "",
        bio: "",
        photo: ""
      })
    };
  },

methods: {
    getProfilePhoto() {
      return "image/" + this.form.photo;
    }

My HTML Code in profile.vue is:

<div class="widget-user-image">
            <img class="img-circle" :src="getProfilePhoto()" alt="User Avatar" />
          </div>

Solution

Are you sure this.form.photo has a value at the time of getProfilePhoto() being called?

The error message:

There is either no index document or the directory is read-protected

Makes me think getProfilePhoto() is returning 'image/' + '' which results in the image directory attempting to be indexed.

One option would be to only show the profile photo if this.form.photo has a value, using v-if:

<div class="widget-user-image">
    <img class="img-circle" v-if="form.photo" :src="getProfilePhoto()" alt="User Avatar" />
</div>