Tengo algunos códigos y cajas que muestran la miniatura de la caja de arena predeterminada y otros que muestran la miniatura de la derecha de los códigos y la caja.
Ver la captura de pantalla de mi lista de sandboxes
No me queda claro de qué depende
He mirado ladocumentación para entender si tengo que configurar el sandbox.config.json
pero no he encontrado nada útil
¿Cómo puedo configurar la miniatura de mis codesandboxes?
No hay una forma integrada de crear una miniatura personalizada, pero encontré una solución.
Es posible cambiar (actualizar) la miniatura visitando https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png , donde SANDBOX_ID
es el ID de su sandbox de código (puede encontrarlo visitando el sandbox que desea personalizar, luego obtenga la última parte del enlace, por ejemplo, https://codesandbox.io/s/`h8pG8` ); codesandbox visitará su página de sandbox y tomará una nueva captura de pantalla de su aplicación y actualizará su sandbox.
Aquí está la parte hacky:
Simplemente cargue la imagen que desee como miniatura en su caja de arena, luego, en su página de inicio, ¡muestre temporalmente esa imagen! Podrías hacer algo como:
<img src="/path/to/my/thumbnail" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; z-index: 100;" />
Luego visite el punto final ( https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png ); revisa tu tablero para ver si la miniatura cambió.
(¡asegúrate de eliminar la imagen más tarde!)
Hola: Soy el que creó el problema de GitHub codesandbox/codesandbox-client#2170 que descubriste y mencionaste , que aborda este tema exacto.
El "microservicio de captura de pantalla" mencionado en el hilo por los empleados de CodeSandbox parece que ya no funciona (o al menos no en este momento). Si funcionó, podría usar una URL en este formato para actualizar la captura de pantalla de uno de sus entornos limitados:
https://codesandbox.io/api/v1/sandboxes/sandboxId/screenshot.png
De acuerdo con su comentario aquí , esta es la URL que usaría para actualizar el entorno limitado específico que mencionó:
https://codesandbox.io/api/v1/sandboxes/oxdod/screenshot.png
Debido a que ese método sugerido oficialmente no está funcionando, su ruta más directa para obtener una respuesta es ponerse en contacto con el servicio de atención al cliente utilizando una de las opciones en la parte inferior de la página de Preguntas frecuentes de CodeSandbox. Sugiero enviar un correo electrónico Y abrir un nuevo problema público en el repositorio.
Este es un error existente para codesandbox, sin embargo, he encontrado una solución temporal para que no se muestre la vista previa. Tome una captura de pantalla de su código/proyecto, cámbiele el nombre thumbnail.png y cárguelo en los archivos