Mostrar imagen con JavaScript

Para mostrar una imagen con JavaScript, puedes actualizar el src de un elemento HTML <img> existente o crear un elemento de imagen y añadirlo a la página. Usa la primera opción para sustituir una imagen en el mismo lugar; crea un elemento nuevo para añadir una imagen a una galería u otro contenedor. En ambos casos, JavaScript modifica el DOM de la página y el navegador carga la imagen indicada por su origen.

Cambiar el origen de una imagen existente

Empieza con una imagen en el HTML y asígnale un ID. Al hacer clic en un botón, puedes actualizar su propiedad src. Este ejemplo completo de página para el navegador espera que image1.jpg e image2.jpg estén disponibles en las rutas indicadas, relativas a la página:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Change an image</title>
  <img id="photo" src="image1.jpg" alt="A view of the coast">
  <button id="change">Show the second photo</button>
  <script>
    const photo = document.querySelector("#photo");
    document.querySelector("#change").addEventListener("click", () => {
      photo.src = "image2.jpg";
      photo.alt = "A view of the mountains";
    });
  </script>
</html>

Al cambiar src, el navegador intenta cargar el nuevo recurso; la página no se sustituye ni se vuelve a cargar por completo. Actualiza también alt si la nueva imagen tiene un contenido significativo distinto. Si la imagen es decorativa y el texto contiguo ya transmite la misma información, usa un valor alt vacío en lugar de repetir ese texto.

Crear y añadir un elemento de imagen

Usa document.createElement("img") para crear un elemento <img>, establece su origen y su texto alternativo y, después, añádelo al contenedor donde deba aparecer. El siguiente ejemplo estático de página para el navegador usa una función auxiliar reutilizable y añade una imagen cada vez que se pulsa el botón. Se espera que images/sunset.jpg se resuelva a partir de la ubicación de la página.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Add an image</title>
  <button id="add">Add photo</button>
  <div id="gallery"></div>
  <script>
    function addImage(source, description, container) {
      const image = document.createElement("img");
      image.src = source;
      image.alt = description;
      container.appendChild(image);
    }

    const gallery = document.querySelector("#gallery");
    document.querySelector("#add").addEventListener("click", () => {
      addImage("images/sunset.jpg", "Sunset over the water", gallery);
    });
  </script>
</html>

width y height son opcionales. Puedes definirlos cuando conocer el tamaño de visualización ayude a reservar espacio en el diseño, o aplicar estilos a la imagen con CSS. La propiedad width de una imagen se mide en píxeles CSS. En diseños adaptables, CSS como max-width: 100%; height: auto puede mantener la imagen dentro de su contenedor y conservar sus proporciones.

Ejecuta este ejemplo de JavaScript para ver cómo una selección conocida se asocia con una ruta de imagen. Es una pequeña demostración ejecutable del paso de selección del origen; los ejemplos de página para el navegador anteriores muestran las operaciones del DOM.

const imagePaths = {
  coast: "images/coast.jpg",
  mountain: "images/mountain.jpg"
};
const selectedImage = imagePaths.coast;
console.log(selectedImage);

Mostrar una imagen según la entrada del usuario

En un menú desplegable, asigna a cada opción un valor que corresponda a una ruta o URL de imagen conocida. Lee el valor seleccionado y actualiza una imagen existente. Este ejemplo de página para el navegador espera que los dos archivos estén en images/, en una ruta relativa a la página:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Select an image</title>
  <label for="image-choice">Choose a scene:</label>
  <select id="image-choice">
    <option value="images/coast.jpg">Coast</option>
    <option value="images/mountain.jpg">Mountain</option>
  </select>
  <img id="preview" src="images/coast.jpg" alt="Coastal scene">
  <script>
    const choices = document.querySelector("#image-choice");
    const preview = document.querySelector("#preview");
    const descriptions = {
      "images/coast.jpg": "Coastal scene",
      "images/mountain.jpg": "Mountain scene"
    };

    choices.addEventListener("change", () => {
      preview.src = choices.value;
      preview.alt = descriptions[choices.value];
    });
  </script>
</html>

Los valores de las opciones están definidos por la página, así que el usuario solo puede elegir un origen que tú hayas proporcionado. Si los valores proceden de otra fuente, valídalos con una lista de valores permitidos antes de asignarlos. Para las cargas de archivos, usa un campo de selección de archivos y crea una URL de objeto temporal a partir del File seleccionado; revoca esa URL cuando ya no la necesites. Por lo general, una ruta de archivo local escrita por el usuario no es una URL que la página pueda leer directamente.

Gestionar rutas, carga y accesibilidad

<img> es un elemento HTML, no una etiqueta de JavaScript. JavaScript crea su representación en el DOM con document.createElement; src es la propiedad de origen de la imagen (y corresponde al atributo src), no un método. Una ruta puede ser relativa o absoluta. Las rutas relativas se resuelven a partir de la URL del documento, que puede ser distinta de la carpeta donde se encuentra un archivo de script. Una ruta relativa a la raíz comienza en la raíz del sitio; una URL absoluta incluye el esquema y el host.

Si no aparece una imagen, inspecciona el src actual del elemento en las herramientas de desarrollo del navegador y abre esa URL directamente. Comprueba la ortografía, las mayúsculas, la URL de la página, el directorio de publicación, la respuesta del servidor y los mensajes de red o de la consola. Una solicitud de imagen fallida suele mostrarse como una imagen rota y un error de red; no es lo mismo que una excepción de JavaScript, como consultar un elemento antes de que exista. Coloca los scripts después del marcado correspondiente o espera a que se cargue el DOM antes de consultarlo. Los eventos load y error también pueden ayudar a determinar si el navegador obtuvo y decodificó la imagen.

Escribe un texto alt breve que describa el contenido útil de la imagen, no su nombre de archivo ni su ruta. A menudo se puede mostrar una imagen de otro origen asignando su URL a src; el permiso CORS es relevante para operaciones restringidas, como leer los píxeles de una imagen de otro origen mediante un canvas. El servidor remoto y las políticas del navegador siguen determinando si se puede cargar un recurso concreto.

Preguntas frecuentes

1. ¿Cómo cambio una imagen con JavaScript? Selecciona su elemento <img> existente y asigna un valor nuevo a src. Actualiza alt si cambia el significado de la imagen.
2. ¿Puede JavaScript añadir varias imágenes? Sí. Crea un elemento <img> para cada origen y añade cada uno a una galería u otro contenedor. Usa un bucle si los orígenes ya están en una matriz.
3. ¿Cómo puede elegir el usuario qué imagen aparece? Lee el valor de un menú desplegable u otro control en su evento change y asigna al src de la imagen de vista previa un origen permitido.
4. ¿Puedo usar una URL de imagen externa? Sí, si se puede acceder a la URL y el servidor permite la solicitud del navegador. Mostrar una imagen por sí sola no suele requerir acceso CORS; leer sus píxeles mediante canvas sí está sujeto a restricciones adicionales entre orígenes.
5. ¿Por qué no aparece la imagen? Comprueba la URL resuelta y el nombre del archivo; luego revisa los paneles Network y Console del navegador para detectar una solicitud fallida o un error de script. Verifica que el archivo esté publicado en la ubicación a la que apunta esa URL.