0

Estoy intentando cargar una imagen desde drive solo con el fin de ver como se muestra en el explorador pero solo me sale el icono de una foto.

Este es el código:

<!doctype html>  
    <html>  
    <head>  
        <meta charset="UTF-8">  
        <title>Firma HTML</title>  
    </head>
    
        <img src="https://drive.google.com/uc?export=14c67W8sWwKRJShrj14ab3uu6fatSYx6g"/>
    
         
    </html>
1
  • 2
    Si intentas acceder directamente a esa url da un error 400. El icono que ves es porque reconoce el elemento <img> seguramente, pero no hay foto en esa url, al menos ahora ya no (quizas era algo temporal)
    – masterguru
    Commented el 20 ene. 2022 a las 21:26

2 respuestas 2

0

El patrón actual definido por Google para mostrar imágenes embebidas es el siguiente:

https://drive.google.com/uc?id=IDIMAGEN

Simplemente, sustituye IDIMAGEN por el valor del ID de la imagen que quieres mostrar.

Por ejemplo:

.container img {
    max-width: 80%;
    background-color: orange;
    padding: .5em .5em .5em .5em;
}
<div class="container">
<img src="https://drive.google.com/uc?id=14c67W8sWwKRJShrj14ab3uu6fatSYx6g"/>
</div>

Recomendación

De todos modos, considera que a lo largo del tiempo Google ha cambiado la forma de mostrar imágenes, por lo que sería conveniente que implementes la API de Google para este tipo de operaciones, pues si Google cambia en un futuro este patrón de URL por otro, las imágenes dejarán de verse.

Si son muchas imágenes, en muchas partes de tu aplicación, mientras implementas la API de Google, puedes declarar una constante con este valor https://drive.google.com/uc?id= y usar dicha constante. Así, si Google cambia, tú cambias nada más la constante, así no tendrás que ir a buscar en todos los contenidos donde pusiste ese valor manualmente.

Precisamente, otra de las ventajas del uso de APIs es que te ayuda a tener el código más centralizado, automatizado siendo más fácil de mantener (aparte de las ventajas que las APIs en sí mismas ya te proporcionan).

0

Intenté usar esta forma de url "https://drive.google.com/uc?id=" y no me ha funcionado.

Me puse a investigar, sospechando que google cambió de estrategia, me funcionó realizandolo de esta manera:

<!DOCTYPE html>
<html>
<head>
    <title>Diseño de una nariz electrónica</title>
</head>
<body>
    <img src="https://lh3.googleusercontent.com/d/1-e-MtvSU4VnRtDe_QfZS22bv3YQPU7pv=s500" alt="Imagen del proyecto">

    <h1>Diseño de una nariz electrónica</h1>
</body>
</html>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.