Las imágenes por defecto se utilizan mucho en redes sociales, ya sea para el avatar de un usuario o el banner de un canal. Por esto, aprender a insertarlas dentro de nuestro código cuando no haya un recurso distinto es fundamental para un desarrollador web. En este post, te enseñaremos cómo insertar imagen por defecto en JavaScript para que tu aplicación no se vea incompleta cuando no exista otra imagen.
¿Cómo insertar imagen por defecto en JavaScript?
Una imagen por defecto en JavaScript es una línea de código que determina un elemento img en caso de que el modelo de datos no tenga este elemento o el usuario haya decidido no crearlo.
Para enseñarte cómo insertar imagen por defecto en JavaScript, te pondremos un ejemplo. Supongamos que tenemos dos posibles fuentes de datos para desarrollar nuestro proyecto. Ambas fuentes contienen un array con posts con distintas propiedades. En este ejemplo, una de las fuentes tiene objetos posts con una propiedad avatar en la que se procesa la imagen que ha decidido colocar el usuario en su perfil.
Para este caso, se puede definir una sección del modelo que diga que, si se recibe esta propiedad, se igualará a una propiedad userImage.
if (post.avatar) {
transformedPost.userImage = post.avatar;
}
Con la sección condicional anterior hemos insertado esta propiedad como parte de nuestro modelo intermedio de datos. Pero ¿qué pasa cuando el usuario no inserta una imagen o cuando la fuente no tiene esta propiedad? En este caso, deberemos insertar imagen por defecto en JavaScript. Para ello, deberemos usar un operador or en vez de una sección condicional.
Es decir, debemos crear una propiedad dentro del objeto transformado que se refiera a la imagen. Esta propiedad será igualada a dos posibles valores: a nuestro avatar o a una imagen por defecto. A continuación, te mostramos cómo agregamos esta propiedad al objeto transformedPost que hemos creado en nuestro artículo sobre transformar modelo de datos en JavaScript:
transformedPosts (posts) {
return posts.map ((post => {
const transformedPost = {
content: post.content || post.body,
userId: post.userId,
updatedAt: post.updatedAt,
id: post.id,
userImage: post.avatar,
};
Ahora que tenemos la primera opción en nuestra propiedad de imagen, insertar imagen por defecto en JavaScript será la segunda opción. Para ello, deberemos buscar o diseñar una imagen que funcione para todos los usuarios. En el caso de muchas redes sociales, esta normalmente es un icono de persona en gris.
Cuando vayas a insertar imágenes en tu proyecto, te recomendamos buscar que estas sean de tamaño pequeño. Esto garantizará que la performance de tu página web no se vea afectada por la carga de imágenes muy grandes.
Una vez seleccionado el elemento que vas a usar para insertar imagen por defecto en JavaScript, puedes insertarlo como segunda opción. Para ello, puedes insertar directamente la URL de la imagen como si fuera un string. A continuación, te mostramos el resultado de este ejercicio:
transformedPosts (posts) {
return posts.map ((post => {
const transformedPost = {
content: post.content || post.body,
userId: post.userId,
updatedAt: post.updatedAt,
id: post.id,
userImage: post.avatar || ‘http://…’,
};
Ahora que tenemos esta propiedad insertada, podremos hacer algo como lo siguiente desde la vista de nuestro proyecto. Ten presente que allí estamos creando un string template o plantilla literal que nos permite usar elementos HTML y pasar variables JS.
let postTemplate = ‘
<h1> ${post.pseudo} </h1>
<p> ${post.content} </p>
<p> ${post.updatedAt} </p>
<img src=»${post.userImage}» </img>
‘;
Para aprender más sobre el concepto de una plantilla que nos permite unir HTML con JavaScript, te recomendamos leer el artículo sobre plantillas literales o plantillas de cadenas en la página oficial de la Mozilla Developer Network.
¿Quieres seguir aprendiendo?
En KeepCoding estamos seguros de que, a pesar de que ahora sabes exactamente qué es y cómo insertar imagen por defecto en JavaScript, quieres seguir aprendiendo sobre el mundo del desarrollo web. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto de este mundo. ¿Quieres seguir aprendiendo con nosotros para destacar en el mercado laboral? ¡Solicita ya mismo más información y descubre cómo puedes cambiar tu vida!
