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

Question

我之前加载的本地图像资产也遇到过类似的问题。 该问题已按照此处的建议解决。

现在我有一个类似的问题，但是当从网络加载图像时，尝试加载谷歌缩略图时更精确。

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

[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
    />