Vuetify 图片加载失败 - 加载 Google 缩略图答案

【问题标题】：Vuetify Image load failed - Loading Google ThumbnailsVuetify 图片加载失败 - 加载 Google 缩略图
【发布时间】：2020-06-24 17:05:46
【问题描述】：

我之前加载的本地图像资产也有类似的问题。该问题已按照here 的建议解决。

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

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

[Vuetify] Image load failed

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

 found in
 ...

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

但是，如果我将错误消息中的 url 复制到浏览器中的另一个选项卡，则图像加载正常。会不会跟referrer有关系？

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

我的实现：

<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 中具有相同的行为）

【问题讨论】：

标签： google-drive-api vuetify.js

【解决方案1】：

设置referrerpolicy="no-referrer" 有帮助。

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

【讨论】：