Vuetify图像加载失败-加载Google缩略图

Question

在加载本地图像资源之前，我遇到了类似的问题。该问题已根据建议here解决。

现在我遇到了类似的问题，但是从网络上加载图像时，尝试加载Google缩略图时更为精确。

我在控制台中收到以下错误消息：

[Vuetify] Image load failed

 src: https://example.com/WZc5zlE...

 found in
 ...

HTTPS请求中的状态码为403（禁止）：

但是，如果我将错误消息中的URL复制到浏览器中的另一个选项卡，则图像加载正常。可能与推荐人有关吗？

错误也来来往往，有时加载它们可以很好地工作，有时则不能。通常，如果我已在浏览器选项卡中手动加载了图像，则该特定图像也将在下次加载到我的页面上。

我的实现：

<template>
  <v-img v-bind:src="getThumbNailSource()" max-height="100px" max-width="100px" contain></v-img>
</template>

<script>
  export default {
  data() {
    return {
      url: "https://example.com/WZc5zlE..."
    };
  },
   methods: {
      getThumbNailSource() {
         return `${this.url}`;
      }
   }
};
</script>

Google云端硬盘范围：https://www.googleapis.com/auth/drive

浏览器：Chrome（在Firefox中得到了相同的行为）

Answer 1

设置Referrerpolicy =“ no-referrer”很有帮助。

   <img
      referrerpolicy="no-referrer"
      v-bind:src="getThumbNailSource()"
      max-height="100px"
      max-width="100px"
      contain
    />