从 public/image 文件夹 laravel vuejs xampp 加载图像时禁止访问 403

Question

在我的个人资料中，图像显示完美，但我在控制台中收到以下错误。如果我尝试从 public 文件夹访问图像，它不会向我显示错误，但如果我尝试从子文件夹的图像文件夹访问它，它会显示 error.anyone 可以帮助我解决这个问题自从 4 天以来，我一直在寻找解决方案，但我没有找到任何解决方案，但他真是太好了。

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

我的API代码是：

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

我的控制器代码是：

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

我的数据和方法代码是：

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

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

我在profile.vue中的HTML代码是：

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

Answer 1

您确定 this.form.photo 在调用 getProfilePhoto() 时有值吗？

错误信息：

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

让我觉得 getProfilePhoto() 正在返回 'image/' + ''，这导致图像目录试图被索引。

一个选项是仅在 this.form.photo 有值时显示个人资料照片，使用 v-if:

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

Answer 2

可能是权限问题，您是否有权访问您的 public 目录，如果可以，您可以检查您的权限吗？即：

ls -li public

现在检查 www-data 或 nginx 是否具有对您的 image 文件夹的允许读取访问权限。

从 public/image 文件夹 laravel vuejs xampp 加载图像时禁止访问 403

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

mysql

xampp

laravel

vue.js