Cómo insertar una imagen en un objeto javascript

Answer 1

Estoy tratando de usar un bucle para insertar un objeto en un div usando .textcontent … Me preguntaba si podría insertar una imagen en un div con javascript. Entonces me di cuenta de que ni siquiera sabía la sintaxis para vincular / src y img.

De un comentario sobre la versión anterior de esta respuesta.

Ambas versiones de esta respuesta asumen que su div tiene una ID, ya que es la forma mejor / más fácil para que JS modifique un elemento HTML. Por ejemplo, voy a usar el ID “myImg”. También asumo que el enlace a la imagen se mantiene en una variable imgURL.

JavaScript simple:

var myDiv = document.getElementById (“myImg”);
myDiv.innerHTML = ‘‘;

Una biblioteca común que la gente usa para modificar HTML en una página es jQuery. Prefiero usar JavaScript simple a menos que jQuery reduzca considerablemente el código en mi archivo .js.

jQuery:

$ (“# myImg”). html (‘‘);

Esta es posiblemente la ruta más fácil, pero en general se considera una mala idea modificar el HTML directamente.

---

Otro método mejor sería construir dinámicamente la etiqueta . Aquí es básicamente lo mismo que hizo el código anterior, pero más seguro:

JavaScript:

// Crear elemento
var myImage = document.createElement (“img”);
// Establecer el src
myImage.setAttribute (“src”, imgURL);
// Añade el a tu

document.getElementById (“myImg”). append (myImage);

jQuery:

$ (““, {
src: imgURL
}). appendTo (“# myImg”);

En ambos ejemplos, al agregar la imagen se agrega el último elemento de la división. Si el div tiene otro contenido y desea que la imagen sea la primera, use en su lugar prepend () y prependTo ().

Answer 2

Simplemente haga un objeto literal e incluya las URL de la imagen como cadenas si de eso se trata:

Ejemplo:

// decir que tienes un objeto que almacena el nombre de un usuario
// age, y la URL de su imagen en miniatura del perfil

const userInfo = {
nombre: ‘Jack Johnson’,
edad: 37,
thumbUrl: ‘ https://res.cloudinary.com/collabizm/image/facebook/c_fill,w_37,h_37,q_auto,g_face,dpr_2,f_auto/v1/1015308446621268&#039 ;
}

Luego use la URL de la imagen, acceda a ella con userInfo.thumbUrl, la cual escupirá la cadena de URL por usted.

Answer 3

Puede crear el elemento de imagen sobre la marcha con JavaScript de esta manera:

Haz clic en el botón para crear un elemento IMG.

http://placehold.it/350×150&#039 ;)”> Pruébelo

Answer 4

Vea esta respuesta en quora:

La respuesta de Mark Wilston a ¿Cómo se inserta una imagen en Javascript?