API Google Диска | Сторонние файлы cookie будут заблокированы. Проблема со вставкой URL-ссылки в атрибут src тега img

Мне нужно загрузить образ Google Диска на сайт. У меня есть общедоступная ссылка: https://drive.google.com/file/d/1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN/view?usp=drive_link. //Он без проблем открылся на других аккаунтах, поэтому я надеюсь, что он общедоступен.

Во всех уроках, которые я читал, я видел, что мне нужна прямая ссылка, поэтому я преобразовал ее в такую: https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN .

Вставив его в атрибут src, я получил ту же проблему:ошибка стороннего cookie в консоли

Я начинающий разработчик, поэтому не особо разбираюсь в том, как правильно распоряжаться облачным хранилищем, возможно, этот метод по ссылкам уже не используется, вот что я видел в статье https://developers.google.com /privacy-sandbox/3pcd?hl , возможно, это не особо связано с проблемой, но это только мое предположение. Я также понимаю, что есть способы избежать использования URL-ссылки, но мне интересно, почему она не работает. (очевидно, потому что я тупой, но тем не менее...)

Вот код, в котором я использую этот URL:

<Avatar // not <img>, but problem the same with both tags
      alt = {username}
      src = {`https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}
      sx = {{
        height: "150px",
        width: "150px",
        position: "relative",
        top: "12%",
        zIndex: "1",
      }}
></Avatar> 

Я пробовал использовать URL-адрес во многих разных форматах, но он работает только тогда, когда я вручную ввожу ссылку на этот сайт: https://ww.labnol.org/embed/google/drive/ . Но на этом сайте нет открытого API, поэтому я обращаюсь сюда за советом. Если окажется, что способа решения этой проблемы нет, я бы приветствовал альтернативные подходы к этой задаче. Извините за мой английский.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как насчет изменения сценария показа следующим образом?

От:

src = {`https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}

К:

src = {`https://drive.google.com/thumbnail?sz=w1000&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}
  • В этом случае файл должен быть общедоступным.
  • Эта конечная точка https://drive.google.com/thumbnail?sz=w1000&id = {fileId} взята из этой темы. Кроме того, размер изображения можно изменить с помощью w1000.

Другие вопросы по теме