A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso Pr谩ctico de Next.js

Curso Pr谩ctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Lista de productos

11/22
Recursos

Aportes 11

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

SOLUCION A: Error: Image with src {URL IMAGE} must use 鈥渨idth鈥 and 鈥渉eight鈥 properties or 鈥渓ayout=鈥榝ill鈥欌 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 鈥渓ink/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 鈥渨idth鈥 and 鈥渉eight鈥 properties or 鈥渓ayout=鈥榝ill鈥欌 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