Cómo obtener URLs de imágenes de Google Drive para el CMS de Webflow con Webflow Cloud

Google Drive dejó de servir imágenes a través de sus antiguos uc?export=view enlaces en 2024, por lo que un enlace compartido de Drive pegado en un campo del CMS ahora muestra una imagen rota.

Si tus recursos e imágenes de campaña siguen estando en Drive, puedes crear una pequeña aplicación Next.js en Webflow Cloud con un Route Handler que obtenga un archivo de Drive incluido en la lista de permitidos a través de la API de Drive y sirva sus bytes desde tu propio dominio.

¿Qué necesitas para obtener URLs de imágenes de Google Drive en Webflow?

Necesitas seis cosas:

• Sitio de Webflow: Un sitio con una colección CMS que tenga un campo de imagen, además de un token de sitio con el cms:write alcance necesario para la importación.
• Node.js 22 y npm: Webflow Cloud se basa en Node.js 22 o posterior, y la página de bring-your-own-app indica: "Actualmente, Webflow Cloud solo admite el gestor de paquetes npm".
• Next.js 15 o superior: La versión mínima que Webflow Cloud admite para aplicaciones Next.js.
• Proyecto de Google Cloud: Un proyecto con la API de Google Drive habilitada, donde puedas crear una clave de API.
• Archivos de Drive que puedas compartir: Imágenes compartidas como "Cualquier persona con el enlace", cada una de menos de 4 MB, ya que es el tamaño máximo de imagen que acepta la API de datos de Webflow.
• Acceso de despliegue: Alguien con permiso para desplegar en el proyecto de Webflow Cloud del sitio; acuerden quién será antes de una entrega de agencia.

Con esto listo, la construcción consiste en un Route Handler más una solicitud de importación por cada imagen.

6 pasos para obtener URLs de imágenes de Google Drive en Webflow Cloud

La construcción comparte los archivos y crea una clave, escribe un Route Handler que actúa como proxy para los archivos de Drive permitidos, lo despliega bajo /assets e importa cada archivo al CMS a través de la API de datos.

1. Comparte los archivos de Drive y crea una clave de API de Google

En el cuadro de diálogo Compartir de cada imagen en Drive, establece el acceso general a "Cualquier persona con el enlace". La ruta lee archivos con una clave de API de Google Cloud, que Google describe como una forma de acceder a datos públicos de forma anónima, por lo que solo puede leer archivos compartidos de esta manera.

Esto es ideal para imágenes destinadas a un sitio web público. Si el administrador de tu Workspace bloquea el uso compartido de enlaces, la ruta necesitará una cuenta de servicio, lo cual queda fuera del alcance de esta guía.

Copia el ID de cada archivo desde su enlace compartido: es la larga cadena de caracteres entre /d/ y /view. Luego, en la consola de Google Cloud de tu proyecto, habilita la API de Google Drive y crea una clave de API restringida a la API de Drive, para que una clave filtrada no pueda llamar a nada más.

Al finalizar este paso, tendrás una clave de API y una lista de IDs de archivos, y cada archivo se abrirá en una ventana de navegador privada sin necesidad de iniciar sesión.

2. Crea la aplicación Next.js y sus variables de entorno

Prepara una aplicación Next.js 15 con App Router y TypeScript, y deja la configuración del entorno de ejecución tal cual. Ejecuta , acepta las indicaciones de App Router y TypeScript, y abre el proyecto en un editor.npx create-next-app@15 drive-images

La página de configuración de Webflow indica que "no necesitas añadir un adaptador, una ruta base ni un modo de salida", así que se mantiene en su valor predeterminado. No añadas a ninguna ruta, aunque la página de "bring-your-own-app" todavía te indique que lo hagas en las rutas de API.next.configexport const runtime = 'edge'

Por qué el entorno de ejecución edge rompe los despliegues de Next.js

Webflow Cloud se despliega en Cloudflare Workers, que es una plataforma edge, pero el destino de tiempo de ejecución de Next.js es una configuración independiente que el adaptador OpenNext Cloudflare, sobre el que corre Webflow Cloud, no admite, por lo que la directiva rompe la compilación.edge

Añade tres variables a un archivo en la raíz del proyecto:.env.local

• GOOGLE_API_KEY: La clave restringida del paso 1; márcala como secreta en Webflow Cloud.
• DRIVE_ALLOWED_FILE_IDS: Los IDs de archivo separados por comas que quieres servir. Cualquier otro ID devolverá un 404, por lo que la ruta nunca actuará como un proxy abierto.
• IMPORT_TOKEN: Una cadena larga y aleatoria que la ruta requiere en cada solicitud; márcala como secreta. Solo el importador de Webflow y tus propias pruebas necesitan enviarla.

Al desplegar, los mismos tres valores se añaden al entorno de Webflow Cloud de la aplicación. La página de variables de entorno de Webflow indica que "tanto las variables de entorno secretas como las no secretas están disponibles para el proceso de compilación de tu aplicación y para la aplicación desplegada en tiempo de ejecución", y los valores secretos se ocultan en los registros de compilación.

Ejecuta y abre la URL local. La página de bienvenida predeterminada de Next.js confirma que la estructura funciona antes de que exista cualquier código de Drive.npm run dev

3. Escribe el gestor de rutas que hace de proxy para los archivos de Drive permitidos

Crea el gestor en . En cada solicitud, este verifica el token de importación y la lista de permitidos, obtiene el archivo a través del método files.get de la API de Drive con , que devuelve el contenido del archivo, y transmite los bytes de vuelta con el tipo de contenido de Drive.app/api/drive/[fileId]/route.tsalt=media

El gestor completo cabe en un solo archivo:

// app/api/drive/[fileId]/route.ts
const MAX_BYTES = 4 * 1024 * 1024;

export async function GET(
  request: Request,
  { params }: { params: Promise<{ fileId: string }> },
) {
  const { fileId } = await params;
  const apiKey = process.env.GOOGLE_API_KEY;
  const importToken = process.env.IMPORT_TOKEN;

  if (!apiKey || !importToken) {
    return new Response('Drive configuration is missing', { status: 500 });
  }

  const token = new URL(request.url).searchParams.get('token') ?? '';
  const allowedIds = new Set(
    (process.env.DRIVE_ALLOWED_FILE_IDS ?? '')
      .split(',')
      .map((id) => id.trim())
      .filter(Boolean),
  );

  if (token !== importToken || !allowedIds.has(fileId)) {
    return new Response('Not found', { status: 404 });
  }

  const upstreamUrl =
    `https://www.googleapis.com/drive/v3/files/${encodeURIComponent(fileId)}` +
    `?alt=media&key=${encodeURIComponent(apiKey)}`;

  let upstream: Response;
  try {
    upstream = await fetch(upstreamUrl, { signal: AbortSignal.timeout(10000) });
  } catch {
    return new Response('Upstream fetch failed', { status: 502 });
  }

  if (!upstream.ok || !upstream.body) {
    return new Response(`Drive returned ${upstream.status}`, { status: 502 });
  }

  const contentType = upstream.headers.get('content-type') ?? '';
  if (!contentType.startsWith('image/')) {
    return new Response('Not an image', { status: 415 });
  }

  const size = Number(upstream.headers.get('content-length') ?? 0);
  if (size > MAX_BYTES) {
    return new Response('Image is larger than 4 MB', { status: 413 });
  }

  return new Response(upstream.body, {
    status: 200,
    headers: { 'Content-Type': contentType },
  });
}

La lista de permitidos y el token juntos forman el límite de seguridad. Sin el token, la ruta responde con un 404 para cada archivo, por lo que nadie puede usarla para gastar tu cuota de Google o extraer archivos que no hayas incluido en la lista.

La verificación evita que una página de error de Drive se pase como si fuera una imagen, y la verificación de tamaño devuelve un 413 claro antes de que el límite de 4 MB de Webflow se convierta en una imagen que falta silenciosamente más adelante. El cuerpo se transmite directamente sin almacenamiento en búfer.startsWith('image/')

Prueba localmente con . Una configuración correcta devuelve un 200 con un tipo de contenido, y la misma solicitud sin el token devuelve un 404 antes de que se realice cualquier solicitud a Drive.curl -I "http://localhost:3000/api/drive/ONE_OF_YOUR_IDS?token=YOUR_IMPORT_TOKEN"image/

4. Despliega la aplicación y móntala en /assets

Despliega el proyecto en Webflow Cloud siguiendo los pasos de "bring-your-own-app" y establece la ruta de montaje de la aplicación en para que las URLs se lean como direcciones de recursos./assets

Añade las tres variables al entorno de Webflow Cloud de la aplicación, marcando GOOGLE_API_KEY y IMPORT_TOKEN como secretas, y luego envía un commit para que una nueva implementación las detecte; los cambios en las variables solo se aplican en una nueva implementación.

Con la ruta de montaje guardada, cada ruta de la aplicación se sitúa bajo /assets, por lo que la dirección de cada imagen es tu dominio, seguido de /assets/api/drive/, y luego el ID del archivo y el token. Solicita una con curl al dominio desplegado y confirma un código 200 con un tipo de contenido image/ antes de importar nada.

La ruta sirve sus propias rutas de aplicación, así que no hace falta NEXT_PUBLIC_BASE_PATH aquí en el navegador. La ruta de montaje solo debe aparecer en las URL que envíes al importador en el siguiente paso.

5. Importa cada imagen a un campo de imagen de CMS a través de la API de datos

Un campo de imagen de CMS escrito a través de la API de datos requiere un objeto con una URL y una alt opcional. Webflow descarga la imagen desde esa URL y almacena su propia copia, por lo que la URL debe ser accesible públicamente y el archivo debe pesar 4 MB o menos.

Tu ruta cumple ambos requisitos y, una vez finalizada la importación, el elemento ya no depende de Drive ni de la ruta.

Crea elementos con el endpoint Create Items, sustituyendo los valores de marcador de posición por los tuyos:

curl -X POST "https://api.webflow.com/v2/collections/$COLLECTION_ID/items/insert?skipInvalidFiles=false" \
  -H "Authorization: Bearer $WEBFLOW_SITE_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [{
      "fieldData": {
        "name": "Spring campaign hero",
        "slug": "spring-campaign-hero",
        "drive-file-id": "FILE_ID",
        "hero-image": {
          "url": "https://yourdomain.com/assets/api/drive/FILE_ID?token=YOUR_IMPORT_TOKEN",
          "alt": "Product shot on a green background"
        }
      }
    }]
  }'

El parámetro skipInvalidFiles=false es importante. Por defecto, el endpoint omite cualquier archivo que no pueda importar y crea el elemento de todos modos, por lo que un token incorrecto o un archivo demasiado grande dejarían un elemento con una imagen vacía y sin error.

Con el parámetro establecido en false, toda la solicitud falla y la respuesta te indica qué archivo causó el problema. El valor drive-file-id se introduce en un campo de texto plano que añado a la colección, del cual depende la comprobación de duplicados en las preguntas frecuentes.

Los elementos se crean como borradores. Abre la colección en el CMS, comprueba la imagen de cada elemento nuevo y publícalos cuando todo se vea bien.

6. Vincula el campo de imagen y comprueba la página publicada

En el Diseñador, vincula un elemento de imagen en la plantilla de colección o dentro de una lista de colección al campo hero-image, de la misma forma que lo harías con una imagen subida manualmente. Como Webflow importó su propia copia, la imagen ahora se sirve desde el alojamiento de activos de Webflow con tamaños adaptables, y seguirá funcionando aunque el archivo de Drive se mueva más tarde.

Añadir una nueva imagen significa añadir su ID a DRIVE_ALLOWED_FILE_IDS, enviar un commit para volver a desplegar y ejecutar la solicitud de importación para ella. Si los editores añaden archivos semanalmente, mueve la lista de permitidos a un almacén que puedan editar sin necesidad de un despliegue.

Publica la página y cárgala. Abre la imagen en una pestaña nueva: la dirección debería estar en el host de activos de Webflow en lugar de en /assets/api/drive/, lo que confirma que la importación creó la copia propia de Webflow.

¿Por qué fallan las URL de imágenes de Google Drive en Webflow Cloud?

Los fallos de compilación casi siempre se deben a la directiva edge. Un código de estado de la ruta apunta a la URL de solicitud o a Drive.

La compilación de Webflow Cloud falla en una ruta de API que se ejecuta bajo npm run dev

Causa: El adaptador OpenNext Cloudflare que utiliza Webflow Cloud para desplegar Next.js no es compatible con el destino de tiempo de ejecución edge de Next.js, por lo que cualquier ruta que contenga export const runtime = 'edge' interrumpe la compilación.

La directiva no genera ningún error bajo npm run dev porque el servidor de desarrollo local no compila a través del adaptador. Los desarrolladores suelen añadirla porque la página de "bring-your-own-app" describe la plataforma diciendo que "Webflow Cloud despliega tu aplicación usando el tiempo de ejecución Edge, permitiendo un alojamiento rápido y distribuido globalmente" y sigue recomendando la directiva para las rutas de API.

Solución: Elimina la exportación runtime de todas las rutas y vuelve a desplegar. Busca runtime = 'edge' en todo el proyecto primero, ya que una sola instancia restante mantendrá el fallo en la compilación.

La importación crea el elemento, pero la solicitud falla o la imagen está vacía

Causa: Webflow no pudo obtener una imagen válida desde la URL. La ruta devuelve un error 404 cuando el token falta o es incorrecto, o cuando el ID no está en la lista de permitidos, y un 413 cuando el archivo supera los 4 MB.

Una URL sin la /assets ruta de montaje nunca llega a la aplicación. Si se deja skipInvalidFiles en su valor predeterminado, cada una de estas genera un elemento con un campo de imagen vacío y sin errores.

Solución: Solicita la URL exacta del cuerpo de la importación con curl -I y lee el estado. Corrige la parte incorrecta de la URL, comprime cualquier archivo mayor a 4 MB y vuelve a ejecutar la importación con skipInvalidFiles=false para que un archivo erróneo detenga la solicitud en lugar de pasar desapercibido.

La ruta devuelve 502 o 415 en lugar de una imagen

Causa: Un error 502 significa que Drive rechazó la solicitud o nunca respondió. Las causas habituales son un archivo que no se compartió como "Cualquier persona con el enlace", una clave de API sin la API de Drive habilitada o restringida a otra API, o una clave eliminada. Un 415 significa que Drive respondió con algo que no es una imagen, por ejemplo, un PDF o un archivo de Google Docs.

Solución: Solicita el archivo directamente desde Drive con curl -I "https://www.googleapis.com/drive/v3/files/FILE_ID?alt=media&key=YOUR_KEY" y lee el estado y Content-Type.

Corrige la configuración de uso compartido o las restricciones de la clave hasta que esa solicitud devuelva una imagen, y elimina los IDs que no sean imágenes de la lista de permitidos. Si solo falla la ruta desplegada, el entorno de Webflow Cloud es diferente a .env.local; actualízalo y envía un commit para volver a desplegar.

Qué puedes construir a continuación con Google Drive y Webflow

El siguiente paso es un script de sincronización que enumere una carpeta de Drive a través de la API de Drive, compare los IDs de archivo con los valores de drive-file-id ya existentes en la colección e importe solo los nuevos. Una vez que los archivos que tu equipo ya gestiona en Drive lleguen al CMS sin que nadie tenga que volver a subirlos, el mismo patrón de ruta se puede aplicar a cualquier fuente de archivos que necesite una URL pública estable.

Para mover contenido en la otra dirección, fuera de Webflow, la guía de exportación de blog utiliza la misma API de datos.

Para cualquier cosa más allá de una simple ruta proxy, la documentación para desarrolladores de Webflow cubre cómo actualizar elementos existentes, incluyendo el reemplazo de una imagen.