Lista de productos

SOLUCION A: Error: Image with src {URL IMAGE} must use “width” and “height” properties or “layout=‘fill’” property.

Agregar los atributos width y height a la etiqueta Image que contiene nuestras imagenes de los articulos

<div className={styles.ProductItem}>
		
				<Image src={product.images[0]} alt={product.title} width="100%" height="100%" layout="responsive" />
			
			<div className={styles["product-info"]}>
				<div>
					<p>${product.price}</p>
					<p>{product.title}</p>
				</div>
				<figure className={styles["more-clickable-area"]} onClick={() => handleClick(product)} >
					{state.cart.includes(product) ? <img className={styles["disabled add-to-cart-btn"]} src={addedToCartImage} alt="added to cart" /> : <Image className={styles["add-to-cart-btn pointer"]} src={addToCartImage} alt="add to cart"

					/>}

				</figure>
			</div>
		</div>

Por ahí consultando, se recomienda agregar un loader mientras llega la información de las imágenes.

<Image
        loader={() => product.images[0]}
        src={product.images[0]}
        alt={product.title}
        width="100%"
        height="100%"
        layout="responsive"
      />

Hola, si tienen este error

Yo lo resolvi modificando el useGetProducts.js

Remplazamos las siguientes lineas

  	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	}, []);

por

  	useEffect(() => {
    	(async () => {
      		const response = await axios(API);	  
      		setProducts(response.data);
    	})();
  	}, []);

Retomando el curso 12 y ejecutar el proyecto me apareció un error relacionado con las imágenes:

Esto se debe a que el API tiene algunos recursos sin imágenes, pero en vez de retornar un array vacío, se devuelve un array con un string vacío, images: [""]:

Por lo que un if con validación del tamaño no es suficiente. Agregué la siguiente validación en el ProductList.jsx para solucionarlo:

return (
        <section className={styles['ProductList-container']}>
            <div className={styles['ProductList-cards']}>
                {products.map((item) => {
                    if (item.images.length > 0 && item.images[0] !== '') {
                        return <ProductCard product={item} key={item.id} />;
                    }
                })}
            </div>
        </section>
    );

El ProductCard sería el ProductItem que el profe Oscar ha estado utilizando.

Me puse a agregar TS al proyecto, y ahora tengo errores que no se como solucionar xD, lo agregue según para practicar Jajaj

Tira varios errores relacionados con las imagenes, por ejemplo dice que no esta permitido el dominio de la imagen, tambien que se necesita un width y un height

En la clase 13 “link/next” se detalla la solución a los errores para las imágenes. Pero si quieres la solución, es configurar en next.config.js los dominios para imágenes externas de la siguiente manera:
.

//next.config.js
module.exports = {
  //Añadir la siguiente configuración
  images: {
    domains: ['placeimg.com']
  }
}

.
Luego deben agregar los atributos width y height al componente <Image /> de next, o también la propiedad layout="fill".
.

<Image src={...} width="100%" height="100%" alt="imagen" />
<Image src={...} width={240} height={240} alt="imagen" />
<Image src={...} layout="fill" alt="imagen" />

.
Y si no carga, también puede ser que la respuesta de la API haya cambiado, que fue mi caso, así que en el hook useGetProducts cambiar de response.data a solamente response.

hay imagenes que son gif y estan causando problemas lo resolvi poniendo una validación

const validarExtension = (ruta) => {
  const extension = ruta.substring(ruta.lastIndexOf('.') + 1).toLowerCase();
  if (extension === 'gif') {
    return false;
  }
  return true;
};

Para aquellos que les da el siguiente error: Error: Image with src “https://placeimg.com/640/480/any?r=0.9178516507833767” must use “width” and “height” properties or “layout=‘fill’” property.

Y el carrito de compras tiene diferente tamaño…

Solución:

Dentro de next.config.js agregar la siguiente línea:

images: {
  domains: ['placeimg.com'],
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['placeimg.com'],
  },
}

module.exports = nextConfig

Esto corregiría las imágenes…

<Image src={product.images[0]} alt={product.title} width={'100%'} height={'100%'} layout='responsive' />
<Image src={BtAddToCart} alt="" width={35} height={35} layout='fixed' />

Search VSCode ¡Recomendación!

 
Le dejo este pequeño aporte para practicar y cambiar más rápido las extensiones de los archivos y/o las declaraciones y así agilizar el proceso.

Search acroos files - VS Code

No sé si esto se resolverá en clases posteriores, pero al implementar el componente Image, mis imágenes se superponen a todo lo demás. Es como si tuvieran un z-index seteado y quedaran por encima de los demás elementos

Inspeccionando las imágenes, no veo ninguna regla que aplique un z-index