2

al aplicar la etiqueta de link y poner la ruta de la imagen que quiero que se descargue y al darle click no descarga la imagen, solo me la muestra en el navegador. ayuda asi puse la etiqueta

<a href="dead.jpg" download="deadpool.jpg">Descarga la imagen de deadpool</a>
5
  • No agregues el código como imagen. debe quedar como texto
    – user128299
    el 6 ago. 2019 a las 4:44
  • lo siento es que no se como hacer eso soy nuevo aqui
    – Kenny
    el 6 ago. 2019 a las 4:44
  • ya estaba como texto, solo déjala como estaba
    – user128299
    el 6 ago. 2019 a las 4:45
  • ya esta como antes, te recomiendo así dejarla
    – user128299
    el 6 ago. 2019 a las 4:46
  • ok muchas gracias amigo}
    – Kenny
    el 6 ago. 2019 a las 4:48

2 respuestas 2

2

Prueba el siguiente codigo que te permite bajar la imagen desde el navegador, ya lo probe y funciona en chrome, firefox y edge...

    <a download="custom-filename.png" href="img01.png" title="ImageName">
        <img alt="ImageName" src="img01.png">
    </a>

Donde: los atributos donwload="" es el nombre que se le dara al archivo para bajar, debe ser la misma extension. href="" es el nombre del archivo con su ruta. src="" es nombre de la imagen con su ruta. alt="" nombre alternativo si no consigue la imagen. title="" nombre que muestra al apuntar a la imagen.

Si lo que deseas es bajar imagenes debes colocar la etiqueta IMG dentro de la etiqueta anchor < a > < / a >

4
  • como asi poner la etiqueta dentro de la etiqueta anchor
    – Kenny
    el 6 ago. 2019 a las 5:20
  • no es necesario colocar la etiqueta img
    – user128299
    el 6 ago. 2019 a las 5:23
  • la imagen se mostrara con la etiqueta img y el atributo src="" vas a colocar la ruta e le nombre de la imgen. ahora en la anchor / vinculo el parametro download="" es el nombre como se bajara el archivo el 6 ago. 2019 a las 5:25
  • tienes razon, tambien funciona, se descargara con el texto contenido en el link el 6 ago. 2019 a las 5:29
2

para utilizar la etiqueta debes implementar la ruta exacta donde está el archivo, si es un documento como word, excel o hasta PDF no es necesario implementarla, es importante que la foto esté en el mismo directorio del proyecto, pero para una imagen te recomendaría lo siguiente:

<a href="http://localhost/miweb/images/hola.jpg" download>
  Descargar imagen
</a>

Nota: Para que el atributo download funcione, se debe realizar desde localhost o en el servidor del proyecto, es importante especificar la ruta absoluta donde esté la foto.

Explicación:

download HTML5

Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local. Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (underscores), lo que evitará sugerencias de ruta específicas. Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia.

Notas:

  • Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs).
  • Este atributo puede ser utilizado con blob: URLs y data: URLs para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.
  • Si el encabezado (header) HTTP Content-Disposition: proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.
  • Si Content-Disposition: está ajustado a inline, Firefox prioriza Content-Disposition, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo download.

Fuente: Elemento a

9
  • Pero no la descarga, solo la carga en el navegador
    – user128299
    el 6 ago. 2019 a las 4:52
  • bueno la imagen esta dentro de la carpeta donde se encuentra el archivo html5...pero intentare la forma que me dices
    – Kenny
    el 6 ago. 2019 a las 4:53
  • Efectivamente, al tratarse de un sitio web diferente lo abre como un recurso y no como un archivo, pero haz lo mismo con la ruta desde donde se encuentra la foto en tu localhost, yo lo acabo de hacer y funciona.
    – CobosDeyby
    el 6 ago. 2019 a las 4:57
  • podrias agregar el codigo de como lo hiciste lo ultimo que me dices por favor
    – Kenny
    el 6 ago. 2019 a las 5:01
  • Ya actualicé mi respuesta, básicamente lo único que necesitas es especificar la ruta de tu directorio donde guardas la imagen, ejemplo: <a href="miproyectoweb/images/foto.jpg" download>Descargar</a> o si lo haces en localhost incluyes la url del proyecto.
    – CobosDeyby
    el 6 ago. 2019 a las 5:04

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.